如果遇到电子签章不显示问题，滑到最下方
npm install --save vue-pdf@4.2.0
npm install pdfjs-dist@2.5.207
如果后台返回的文件流为图片 — 只需要将 <pdf :src="src/> 改为 <img :src="src/">即可
<template><div><!-- pdf预览 --><div><pdf:page="pageNum":src="src"@progress="loadedRatio = $event"@num-pages="pageTotalNum = $event"/><!-- --><div class="pdf-btn" v-if="pageTotalNum > 1"><van-button round type="info" size="small" @click="prePage">上一页</van-button><span class="pdf-span">{{ pageNum }}</span><span>/</span><span> {{ pageTotalNum }}</span><van-button round type="info" size="small" @click="nextPage">下一页</van-button></div><van-empty v-else description="预览失败" /></div></div></template>
在接口API函数中声明
responseType: 'blob'
export function viewPdf(data) {return request.post("接口地址",data,{token: true, responseType: 'blob' })}
后台返回的文件流
<script>import pdf from "vue-pdf";import {viewPdf } from "@/api/financing";export default {components: {pdf,},data() {return {src: "",//文件地址pageNum: 1, //当前页pageTotalNum: 1, //默认总页数};},mounted() {this.loadPdf();},methods: {loadPdf() {//viewPdf():封装的api函数，params:接口入参viewPdf(params).then((res) => {//blob参数是一个File对象或者Blob对象//objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容this.src = window.URL.createObjectURL(new Blob([res.data]));});},//上一页prePage() {let page = this.pageNum;page = page > 1 ? page - 1 : this.pageTotalNum;this.pageNum = page;},//下一页nextPage() {let page = this.pageNum;page = page < this.pageTotalNum ? page + 1 : 1;this.pageNum = page;},},};</script>
在axios拦截器中设置返回数据类型为"blob"时的操作
service.interceptors.response.use(response => {if (response.request.responseType == "blob") {return response;} else {return response.data;}})
电子签章不显示解决方案
一、 在node_modules/pdfjs-dist/build/pdf.worker.js注释掉下方代码
this.setFlags(_util.AnnotationFlag.HIDDEN);
二、 在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释下方代码
_this3.setFlags(_util.AnnotationFlag.HIDDEN);
