img pdf 展示_vue 中展示PDF内容

vue 中展示PDF内容

不久前有个需要改的需求，以前是直接根据链接让用户下载对应pdf文件来查看，最主要是给用户查看，然而这种并不是很安全的，其他用户可以进行下载或者使用pdf链接分享给其他人，所以后来需要验证后再进行展示pdf内容，只有对应知道的人自己验证后才能打开;

这里说下自己的实现吧，读取pdf，那么在纯静态的使用vue-cli搭建的网站中读取pdf文件是不行的，何况涉及到验证，那么只有调用接口来处理，但是读取pdf文件展示就需要组件，找了pdf.js 来使用，根据官方文档，pdf文件不能够使用其他网站的，也就是不能跨域，不过幸好可以加载文件流进去，至此 验证=>获取文件流数据=>渲染 完成，下方给的是处理代码

loadFile(data) {

let _this = this;

let transData = window.atob(data);

PDFJS.getDocument({ data: transData }).then(pdf => {

_this.pdfDoc = pdf;

_this.pages = _this.pdfDoc.numPages;

_this.$nextTick(() => {

_this.renderPage(1);

});

});

}

renderPage(num) {

let _this = this;

this.pdfDoc.getPage(num).then