前言
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文件及打印乱码的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。