组件PriviewPdf
简易版(页尾是完整版)
<template><div class="priview-pdf-img"><pdf :pdfUrl="pdfSrc"></pdf></div></template><script>import pdf from 'vue-pdf'export default {name: 'priview-pdf',components: {pdf},props: {// 外部传递pdfUrl 即可pdfUrl: {type: String,default: ''}},computed: {pdfSrc () {return this.pdfUrl}}}</script>
页面
<priview-pdf pdfUrl="文件地址"></priview-pdf>
思路
安装 vue-pdf 插件按需引入import pdf from 'vue-pdf'当一个组件使用components: { pdf }
可能遇到的问题
预览时不能显示中文，特别是发票之类的pdf.解决方案： 引入import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'传入的pdfUrl 改为pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory })
解决中文无法显示的版本
<template><div class="priview-pdf-img"><!-- 自己设置图片路径--><img src="@/assets/pdfInit.png" @click="dialogPriviewPdf = true" alt="" /><el-dialog title="预览" :visible.sync="dialogPriviewPdf" top="5vh" append-to-body><pdf :src="pdfSrc" ref="pdf"></pdf></el-dialog></div></template><script>import pdf from 'vue-pdf'import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'export default {name: 'priview-pdf',components: {pdf},props: {// 外部传递pdfUrl 即可pdfUrl: {type: String,default: ''}},data () {return {dialogPriviewPdf: false}},computed: {pdfSrc () {return pdf.createLoadingTask({url: this.pdfUrl, CMapReaderFactory })}}}</script><style lang="less" scoped>.priview-pdf-img {img {width: 100px;height: 100px;}}& /deep/ .el-dialog {width: 80%;overflow-y: auto;}</style>
··· 生产中出现了一种诡异的情况， 打开第一个pdf后 ，不能打开其他的pdf了
··· 解决方法
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'pdfSrc (val) {const that = thisreturn pdf.createLoadingTask({ url: val, cMapUrl: '/npm/pdfjs-dist@2.5.207/cmaps/',cMapPacked: true })},
