根据公司的实际项目需求，要求实现对pdf和ofd文件的预览，并且需要限制用户是否可以下载、打印、另存pdf、ofd文件，如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单，直接调用浏览器的预览就可以而且功能也比较全，但是一涉及到禁止用户打印、另存的话就不可以用浏览器自带的预览方式了。那就只能寻找插件来模拟了，之前在eletron-vue项目中使用过pdfjs以及vue-pdf插件，效果不是特别好，vue-pdf底层其实也是用的pdfjs的东西，当时在客户端项目中莫名的报一些错误（可能是因为版本问题，当时项目比较着急没有太多时间去排坑）果断弃坑选择了iframe预览pdf文件，也可以达到当时项目需求。但是，目前的需求背景是管理端以及门户端想要实现此功能，脱离了electron的限制，我决定还是使用vue-pdf比较靠谱，我也简单安装并测试使用了一下，没有问题可以正常预览本地文件并且并没有报electron中的不知名的错误。下面先来说一下插件的具体使用方法：

1.安装vue-pdf依赖：

npm/yarn i/add vue-pdf

2.import导入并注册依赖（哪个界面需要在哪个界面单独导入即可）

// 单组件引用import pdf from 'vue-pdf' // 然后在component中进行注册components: { pdf},

3.界面中使用vue-pdf

// 点击分页<div> <el-button size="small" type="primary" @click="changePdfPage(0)" :>上一页</el-button> { {currentPage}} / { {pageCount}} <el-button size="small" type="primary" @click="changePdfPage(1)" :>下一页</el-button></div><div ref="printContent"> <pdf ref="pdfDom" :src="pdfSrc" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"> </pdf></div>// 声明变量data() { return { pdfSrc: '', // pdf文件src pageCount: 0, // pdf文件总页数 currentPage: 1, // pdf文件页码 }},// 获取文件流和文件总页数 async getFileInfo() { let formData = new FormData(); formData.append('wjid', this.wjid) formData.append('yhid', this.userId) let res = await getFileBuffer(formData) if(res.status === 200){ const blob = new Blob([res.data]) let pageRes = await getFilePages(formData) this.pdfSrc = URL.createObjectURL(blob) this.pageCount = pageRes.data.content }else{ this.$message({ message: res.message, type: 'error' }); }},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage (val) { if (val === 0 && this.cu