vue实现pdf预览功能总结

总结：
最初我是用了vue-pdf这个直接进行安装并进行使用的，可是并不适用我的项目，而且用户体验不好，最主要的是出现空白页，这只能完成简单的静态预览打印功能，让我觉得内心总觉得那里不满足。
所以我干脆换了一种iframe的使用预览方式，这个方法简直太爽了，可以预览，在预览中生成目录，跳页翻页还有预览小框点击跳转页面，下载，打印，放大缩小并且还清晰展示，这些都可以满足！！！

1. 简单的预览功能请使用vue-pdf

npm install --save vue-pdf

这里就不细描述了，具体看官网
https://www.npmjs.com/package/vue-pdf

2. 想要功能比较全的就使用iframe的方法
   第一步： 把静态文件下载下来
   https://download.csdn.net/download/rock_23/19194277
   第二步：把pdf整个文件全部放到public文件中

// 在public中我们使用的路径就是如下
/pdf/web/viewer.html

组件中使用方法：

<iframe class="prism-player" :src="pdfUrl" width="100%" height="800px"></iframe>

let urlPdf  = window.URL.createObjectURL(new Blob([data])) // 把文件流转换成url的形式，
this.pdfUrl = `/pdf/web/viewer.html?file=${urlPdf}&page=1` // page=1是在每次弹框进入页面时页码都为1

如图所示：

注：在使用第二种方法时，你可以去修改viewer.html这个文件内具体你所使用到的内容，还有一些你用不到的内容。

参考：https://blog.csdn.net/m0_46627730/article/details/108851347?utm_term=vue%E4%BD%BF%E7%94%A8iframe%E9%A2%84%E8%A7%88pdf&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-0-108851347&spm=3001.4430