(编辑:jimmy 日期: 2024/12/23 浏览:2)
前言
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="/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">预览效果
点击下载打印预览
预览出现乱码
pdf打印乱码解决办法
打开vue-pdf插件目录node_modules/vue-pdf/src/pdfjsWrapper.js
解决办法
详见Github上提供解决办法 Fix fonts issue in printing #130
乱码解决,打印预览正常
修改后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文件及打印乱码的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。