vue移动端实现vue-pdf在线预览与展示,并且解决页面汉字空白的问题
vue移动端实现pdf的页面在线预览展示,CMapReaderFactory可以解决文字不展示、空白问题
//1、安装依赖vue-pdf
npm install --save vue-pdf
//2、使用组件
<pdf v-for="i in numPages" ref="pdfs" :src="pdfUrl" :key="i" :page="i"></pdf>
//3、js文件
<script>
//引入pdf
important pdf from "vue-pdf";
important CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js"
export default{components:{ pdf },data(){pdfUrl:"",numPages:[]},created(){this.getPdf();//调用方法},//获取pdfmethods:{//接口获取pdfgetPdf(){getPdf({fcn:3 }).then(res=>{if(res.code === '0'){ //需要转换为base64位this.pdfUrl = "data:application/pdf;base64," + res.data.pdfUrl;this.pdfUrl = pdf.createLoadingTask(this.pdfUrl ,CMapReaderFactory);this.pdfUrl .promise.then(pdf => {this.$nextTick(() => {this.numPages = pdf.numPages}).catch((err) => {console.error('pdf 加载失败', err)})});}})}
}</script>