需求是点击查看收据按钮，进入新页面直接显示收据，可以放大、缩小、旋转、下载，没有分页
1、安装
npm i vue-pdf --save
2、使用
<template><div ><pdf v-if="show" :rotate="pageRotate" ref="pdf" :src="pdfSrc" /><div v-if="show" class="btn_contain"><div class="com_btn" @click="scaleD">放大</div><div class="com_btn" @click="scaleX">缩小</div><div class="com_btn" @click.stop="clock">旋转</div><div class="com_btn" @click="downloadPDF">下载</div></div></div></template>
<script>import pdf from 'vue-pdf'import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'import { Toast } from 'vant'export default {components: {pdf},data() {return {pdfSrc: '',pxheight: '',pxwidth: '',scale: 100, // 放大系数pageRotate: 0,//旋转系数url: ``,//此处为后台返回的预览pdf的url接口路径，带参数，不便展示，所以删除，自己加上就好loadingInstance: null,show: false}},created(){},mounted() {this.loadPdf(this.url)},methods: {// pdf加载时loadPdf(url) {// 展示loadingthis.loadingInstance = Toast.loading({duration: 0, // 持续展示 toastforbidClick: true,message: '加载中...'})let CMAP_URL = "/pdfjs-dist@2.0.943/cmaps/";this.pdfSrc = pdf.createLoadingTask({url,cMapUrl: CMAP_URL,cMapPacked: true,CMapReaderFactory});this.pdfSrc.promise.then((pdf) => {// 清除loadingthis.loadingInstance && this.loadingInstance.clear();this.show = true}).catch(()=>{})},// 放大scaleD(){this.scale += 5this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'},// 缩小scaleX () {if (this.scale === 100) {return} this.scale += -5this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'},// 旋转clock () {this.pageRotate += 90},//下载PDFdownloadPDF(){window.location.href = ''//此处为后台返回的下载pdf的url接口路径，带参数，不便展示，所以删除，自己加上就好},}</script>
使用vue-pdf遇到的坑，总的来说有三个
1、进入页面后不显示文字
查阅解决方法，看到了两种，
一种是导入cMapReaderFactory,但是用第一种方法会导致问题2 （看了一个大佬写的）
一种是代码中加CMAP_URL和cMapPacked两个参数（这种的不知道管不管用）
巧的是这两种我都不管用，哈哈哈哈哈
2、进入页面后显示，但是再次进入页面不显示问题
引入了cMapPacked之后解决了上面的问题，但是紧接着出现了再次进入页面不显示的问题。
在CMapReaderFactory文件中的代码是这样的
import { CMapCompressionType } from 'pdfjs-dist/es5/build/pdf.js'// see /mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64export default function() {this.fetch = function(query) {return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */).then(function(bcmap) {return {cMapData: bcmap.default,compressionType: CMapCompressionType.BINARY,};});}};
这段代码通过动态import PDF的语言文件实现解决中文显示的问题
3、pdf签章没显示出来，控制台提示：Warning: Unimplemented widget field type "Sig", falling back to base field type
（1）找到 node_modules\pdfjs-dist\build\pdf.worker.js 将下面的代码行注释掉
if (data.fieldType === "Sig") {data.fieldValue = null;// this.setFlags(_util.AnnotationFlag.HIDDEN);//将这一行注释掉解决签章不显示问题}
2、找到 node_modules\pdfjs-dist\es5\pdf.worker.js 将下面的代码行注释掉
if (data.fieldType === "Sig") {data.fieldValue = null;// _this3.setFlags(_util.AnnotationFlag.HIDDEN);//将这一行注释掉}
