当前位置:首页 >> 网络编程

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

前言

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 }"
     >上一页&nbsp;&nbsp;</span
    >
    <span style="color: #8c8e92;">{{ currentPage }} / {{ pageCount }}</span>
    <!-- 下一页 -->
    <span
     @click="changePdfPage(1)"
     class="currentPage"
     :class="{ grey: currentPage == pageCount }"
     >&nbsp;&nbsp;下一页</span
    >&nbsp;&nbsp;&nbsp;&nbsp;<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="/UploadFiles/2021-04-02/src">

使用

<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="/UploadFiles/2021-04-02/src">

预览效果

解决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 "color: #ff0000">补充知识: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文件及打印乱码的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。