解决vue-pdf查看pdf文件及打印乱码的问题


Posted in Javascript onNovember 04, 2020

前言

vue中简单使用vue-pdf预览pdf文件,解决打印预览乱码问题

vue-pdf 使用

安装

npm install --save vue-pdf

引入

import pdf from "vue-pdf

自定义封装pdf预览组件

<template>
 <el-dialog
  :visible.sync="pdfDialog"
  :close-on-click-modal="false"
  :show-close="false"
  width="900px"
  top="52px"
 >
  <div class="pdf" v-show="fileType == 'pdf'">
   <p class="arrow">
    <!-- 上一页 -->
    <span
     @click="changePdfPage(0)"
     class="currentPage"
     :class="{ grey: currentPage == 1 }"
     >上一页  </span
    >
    <span style="color: #8c8e92;">{{ currentPage }} / {{ pageCount }}</span>
    <!-- 下一页 -->
    <span
     @click="changePdfPage(1)"
     class="currentPage"
     :class="{ grey: currentPage == pageCount }"
     >  下一页</span
    >    <button @click="$refs.pdf.print()">下载</button>

    <span
     style="float :right;padding-right:40px;font-size: 20px;color: #8c8e92;cursor: pointer;"
     @click="close"
     ><i class="el-icon-close"></i
    ></span>
   </p>
   <!-- loadPdfHandler:加载事件 src:需要展示的PDF地址;currentPage:当前展示的PDF页码;pageCount=$event:PDF文件总页码;currentPage=$event:一开始加载的页面-->
   <pdf
     ref="pdf"
    :src="src"
    :page="currentPage"
    @num-pages="pageCount = $event"
    @page-loaded="currentPage = $event"
    @loaded="loadPdfHandler"
   ></pdf>
  </div>
 </el-dialog>
</template>

<script>
import pdf from "vue-pdf";
export default {
 components: { pdf },
 props: ["src"],
 data() {
  return {
   filesProps: {
    label: "originName"
   },
   pdfDialog: false,
   currentPage: 0, // pdf文件页码
   pageCount: 0, // pdf文件总页数
   fileType: "pdf" // 文件类型
  };
 },
 methods: {
  // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
  changePdfPage(val) {
   if (val === 0 && this.currentPage > 1) {
    this.currentPage--;
   }
   if (val === 1 && this.currentPage < this.pageCount) {
    this.currentPage++;
   }
  },
  // pdf加载时
  loadPdfHandler() {
   this.currentPage = 1; // 加载的时候先加载第一页
  },
  handleOpen() {
   this.pdfDialog = true;
  },
  //关闭弹框
  close() {
   this.pdfDialog = false;
  }
 }
};
</script>

<style lang="stylus">
.currentPage {
  cursor: pointer;
  color: #8c8e92;
}

.currentPage:hover {
  color: #2761ff;
}
.arrow{
  position: fixed;
  top: 0px;
  left :0px;
  z-index: 2;
  width: 100%;
  background-color: #191919;
  padding: 12px 0;
  margin: 0;
  text-align :center;
}
>>>.el-dialog__body {
  color: #606266;
  font-size: 14px;
  padding:0;
}
</style>

使用

<template>
 <el-container>
  <el-header>
   <el-card>
    <div>
     <el-button
      style="font-style:oblique;font-size: 18px;"
      @click="handlePreviewFile"
      >PDF 预览</el-button
     >
     <el-button
      style="float: right;line-height: 40px;padding: 3px;"
      type="text"
      @click="handleSafetyExperience"
      ><i class="el-icon-caret-left">返回</i></el-button
     >
    </div>
   </el-card>
  </el-header>
  <el-main>
   <el-card class="card-style">
    <pdf-preview ref="pdfSearch" :src="src"></pdf-preview>
   </el-card>
  </el-main>
 </el-container>
</template>

<script>
import PdfPreview from "../widget/PdfPreview";
export default {
 name: "InfoExperience",
 components: {
  PdfPreview
 },
 data() {
  return {
   src:
    "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
  };
 },
 created() {},
 methods: {
  handlePreviewFile() {
   this.$refs.pdfSearch.handleOpen();
  },
  handleSafetyExperience() {
   this.$router.push({ path: "/safetyApp/sharedExperience" });
  }
 }
};
</script>

<style scoped></style>

预览效果

解决vue-pdf查看pdf文件及打印乱码的问题

点击下载打印预览

预览出现乱码

解决vue-pdf查看pdf文件及打印乱码的问题

pdf打印乱码解决办法

打开vue-pdf插件目录node_modules/vue-pdf/src/pdfjsWrapper.js

解决vue-pdf查看pdf文件及打印乱码的问题

解决办法

详见Github上提供解决办法 Fix fonts issue in printing #130

乱码解决,打印预览正常

解决vue-pdf查看pdf文件及打印乱码的问题

修改后pdfjsWrapper.js源码

以下为本人修改的pdfjsWrapper.js文件,亲测解决乱码问题

import { PDFLinkService } from 'pdfjs-dist/lib/web/pdf_link_service';

export default function(PDFJS) {

 function isPDFDocumentLoadingTask(obj) {

 return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
 }

 function createLoadingTask(src, options) {

 var source;
 if ( typeof(src) === 'string' )
  source = { url: src };
 else if ( src instanceof Uint8Array )
  source = { data: src };
 else if ( typeof(src) === 'object' && src !== null )
  source = Object.assign({}, src);
 else
  throw new TypeError('invalid src type');

 var loadingTask = PDFJS.getDocument(source);
 loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public

 if ( options && options.onPassword )
  loadingTask.onPassword = options.onPassword;

 if ( options && options.onProgress )
  loadingTask.onProgress = options.onProgress;

 return loadingTask;
 }


 function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) {

 var pdfDoc = null;
 var pdfPage = null;
 var pdfRender = null;
 var canceling = false;

 canvasElt.getContext('2d').save();

 function clearCanvas() {

  canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height);
 }

 function clearAnnotations() {

  while ( annotationLayerElt.firstChild )
  annotationLayerElt.removeChild(annotationLayerElt.firstChild);
 }

 this.destroy = function() {

  if ( pdfDoc === null )
  return;
  pdfDoc.destroy();
  pdfDoc = null;
 }

 this.getResolutionScale = function() {

  return canvasElt.offsetWidth / canvasElt.width;
 }

 this.printPage = function(dpi, pageNumberOnly) {

  if ( pdfPage === null )
  return;

  // 1in == 72pt
  // 1in == 96px
  var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;
  var PRINT_UNITS = PRINT_RESOLUTION / 72.0;
  var CSS_UNITS = 96.0 / 72.0;

  // var iframeElt = document.createElement('iframe');
  var printContainerElement = document.createElement('div');
  printContainerElement.setAttribute('id', 'print-container')

  // function removeIframe() {
  //
  // iframeElt.parentNode.removeChild(iframeElt);
  function removePrintContainer() {
  printContainerElement.parentNode.removeChild(printContainerElement);

  }

  new Promise(function(resolve, reject) {

  // iframeElt.frameBorder = '0';
  // iframeElt.scrolling = 'no';
  // iframeElt.width = '0px;'
  // iframeElt.height = '0px;'
  // iframeElt.style.cssText = 'position: absolute; top: 0; left: 0';
  //
  // iframeElt.onload = function() {
  //
  // resolve(this.contentWindow);
  // }
  //
  // window.document.body.appendChild(iframeElt);
  printContainerElement.frameBorder = '0';
  printContainerElement.scrolling = 'no';
  printContainerElement.width = '0px;'
  printContainerElement.height = '0px;'
  printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0';

  window.document.body.appendChild(printContainerElement);
  resolve(window)
  })
  .then(function(win) {

  win.document.title = '';

  return pdfDoc.getPage(1)
  .then(function(page) {

   var viewport = page.getViewport(1);
   // win.document.head.appendChild(win.document.createElement('style')).textContent =
   printContainerElement.appendChild(win.document.createElement('style')).textContent =
   '@supports ((size:A4) and (size:1pt 1pt)) {' +
    '@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +
   '}' +

   '#print-canvas { display: none }' +

   '@media print {' +
    'body { margin: 0 }' +
    'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' +
   '#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +
   'body > *:not(#print-container) { display: none; }' +
   '}'+

   '@media screen {' +
    'body { margin: 0 }' +
   // '}'+
   //
   // ''
   '}'
   return win;
  })
  })
  .then(function(win) {

  var allPages = [];

  for ( var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber ) {

   if ( pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1 )
   continue;

   allPages.push(
   pdfDoc.getPage(pageNumber)
   .then(function(page) {

    var viewport = page.getViewport(1);

    // var printCanvasElt = win.document.body.appendChild(win.document.createElement('canvas'));
    var printCanvasElt = printContainerElement.appendChild(win.document.createElement('canvas'));
    printCanvasElt.setAttribute('id', 'print-canvas')

    printCanvasElt.width = (viewport.width * PRINT_UNITS);
    printCanvasElt.height = (viewport.height * PRINT_UNITS);

    return page.render({
    canvasContext: printCanvasElt.getContext('2d'),
    transform: [ // Additional transform, applied just before viewport transform.
     PRINT_UNITS, 0, 0,
     PRINT_UNITS, 0, 0
    ],
    viewport: viewport,
    intent: 'print'
    }).promise;
   })
   );
  }

  Promise.all(allPages)
  .then(function() {

   win.focus(); // Required for IE
   if (win.document.queryCommandSupported('print')) {
   win.document.execCommand('print', false, null);
   } else {
   win.print();
    }
   // removeIframe();
   removePrintContainer();
  })
  .catch(function(err) {

   // removeIframe();
   removePrintContainer();
   emitEvent('error', err);
  })
  })
 }

 this.renderPage = function(rotate) {
  if ( pdfRender !== null ) {

  if ( canceling )
   return;
  canceling = true;
  pdfRender.cancel();
  return;
  }

  if ( pdfPage === null )
  return;

  if ( rotate === undefined )
  rotate = pdfPage.rotate;

  var scale = canvasElt.offsetWidth / pdfPage.getViewport(1).width * (window.devicePixelRatio || 1);
  var viewport = pdfPage.getViewport(scale, rotate);

  emitEvent('page-size', viewport.width, viewport.height);

  canvasElt.width = viewport.width;
  canvasElt.height = viewport.height;

  pdfRender = pdfPage.render({
  canvasContext: canvasElt.getContext('2d'),
  viewport: viewport
  });

  annotationLayerElt.style.visibility = 'hidden';
  clearAnnotations();

  var viewer = {
  scrollPageIntoView: function(params) {
   emitEvent('link-clicked', params.pageNumber)
  },
  };

  var linkService = new PDFLinkService();
  linkService.setDocument(pdfDoc);
  linkService.setViewer(viewer);

  pdfPage.getAnnotations({ intent: 'display' })
  .then(function(annotations) {

  PDFJS.AnnotationLayer.render({
   viewport: viewport.clone({ dontFlip: true }),
   div: annotationLayerElt,
   annotations: annotations,
   page: pdfPage,
   linkService: linkService,
   renderInteractiveForms: false
  });
  });

  pdfRender
  .then(function() {
  annotationLayerElt.style.visibility = '';
  canceling = false;
  pdfRender = null;
  })
  .catch(function(err) {

  pdfRender = null;
  if ( err instanceof PDFJS.RenderingCancelledException ) {

   canceling = false;
   this.renderPage(rotate);
   return;
  }
  emitEvent('error', err);
  }.bind(this))
 }


 this.forEachPage = function(pageCallback) {

  var numPages = pdfDoc.numPages;

  (function next(pageNum) {

  pdfDoc.getPage(pageNum)
  .then(pageCallback)
  .then(function() {

   if ( ++pageNum <= numPages )
   next(pageNum);
  })
  })(1);
 }


 this.loadPage = function(pageNumber, rotate) {

  pdfPage = null;

  if ( pdfDoc === null )
  return;

  pdfDoc.getPage(pageNumber)
  .then(function(page) {

  pdfPage = page;
  this.renderPage(rotate);
  emitEvent('page-loaded', page.pageNumber);
  }.bind(this))
  .catch(function(err) {

  clearCanvas();
  clearAnnotations();
  emitEvent('error', err);
  });
 }

 this.loadDocument = function(src) {

  pdfDoc = null;
  pdfPage = null;

  emitEvent('num-pages', undefined);

  if ( !src ) {

  canvasElt.removeAttribute('width');
  canvasElt.removeAttribute('height');
  clearAnnotations();
  return;
  }

  if ( isPDFDocumentLoadingTask(src) ) {

  if ( src.destroyed ) {

   emitEvent('error', new Error('loadingTask has been destroyed'));
   return
  }

  var loadingTask = src;
  } else {

  var loadingTask = createLoadingTask(src, {
   onPassword: function(updatePassword, reason) {

   var reasonStr;
   switch (reason) {
    case PDFJS.PasswordResponses.NEED_PASSWORD:
    reasonStr = 'NEED_PASSWORD';
    break;
    case PDFJS.PasswordResponses.INCORRECT_PASSWORD:
    reasonStr = 'INCORRECT_PASSWORD';
    break;
   }
   emitEvent('password', updatePassword, reasonStr);
   },
   onProgress: function(status) {

   var ratio = status.loaded / status.total;
   emitEvent('progress', Math.min(ratio, 1));
   }
  });
  }

  loadingTask
  .then(function(pdf) {

  pdfDoc = pdf;
  emitEvent('num-pages', pdf.numPages);
  emitEvent('loaded');
  })
  .catch(function(err) {

  clearCanvas();
  clearAnnotations();
  emitEvent('error', err);
  })
 }

 annotationLayerElt.style.transformOrigin = '0 0';
 }

 return {
 createLoadingTask: createLoadingTask,
 PDFJSWrapper: PDFJSWrapper,
 }
}

补充知识:vueshowpdf插件预览中文pdf出现乱码问题+pdf.js加载bcmap文件404报错

vue项目中使用到pdf在线预览,使用了vueshowpdf,测试pdf是好好的,但是当上传到服务器出现预览的pdf乱码问题,很是纠结,网上找了好多资料没有,于是找找pdf相关的pdf预览乱码(中文乱码)问题解决方案。

之前也试过pdf.js插件本地测试,当去掉cmaps文件夹之后PDF会乱码,添加之后又好了。查看.bcmap文件原来时候字体有关系的,于是估计就是字体问题。

解决方法:

1、下载pdf.js插件,复制cmaps文件夹放到vue项目中,我放在static文件夹下面

2、在对应使用到vueshowpdf插件中添加代码

***
PDFJS.cMapUrl = '../../static/cmaps/';
PDFJS.cMapPacked = true;
***
PDFJS.cMapUrl = '../../static/cmaps/';//这里面是相对路径

然后神奇的效果就是成功啦,不再乱码了。

注意:

可能您的页面在服务器端还会出现乱码,中文不识别,不要怕,我找到了问题所在,IIS的MIME问题(然后找到网上一篇文章,证实了我是的想法)

新增:2018-11-16

我们会发现

我的bcmp文件已经放到了对应目录了,配置也对了,怎么还是404

其实这个是iis的MIME文件设置

新增.bcmap文件 配置值 .bcmap -> image/svg+xml

我遇到的问题是.net项目,所以或者在Web.config添加如下代码

<system.webServer>
  <staticContent>
   <mimeMap fileExtension=".bcmap" mimeType="image/svg+xml" />
  </staticContent>
 </system.webServer>

现在重新运行下应该是可以了,如果还不行的话,暂时就不知道是什么原因引起的了

作为一个前端,难为我了!

以上这篇解决vue-pdf查看pdf文件及打印乱码的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JS中常用的正则表达式
Sep 29 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
js精确的加减乘除实例
Nov 14 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 #Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 #Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 #Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 #Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 #Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 #Javascript
解决vant-UI库修改样式无效的问题
Nov 03 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
很好用的PHP数据库类
2009/05/27 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jquery图片切换插件
2015/03/16 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
详解Python3中的 input() 函数
2020/03/18 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
资料员的岗位职责
2013/11/20 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
中学生班主任评语
2014/01/30 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
班级旅游计划书
2014/05/03 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Nebula Graph解决风控业务实践
2022/03/31 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技