vue+pdf.js实现页面PDF文件预览

vue+pdf.js实现页面PDF文件预览

1官方文档:pdf.js

2效果图:

3使用指南

参考博客:
=1001.2101.3001.6650.2&utm_medium=distribute.-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-127572375-blog-108522343.pc_relevant_default&depth_1-utm_source=distribute.-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-127572375-blog-108522343.pc_relevant_default&utm_relevant_index=5

4对接后端代码

保证能够可以直接访问:8081/pdf/web/viewer.html即可

1前端创建一个预览页面的公共组件
2get请求后端返回的"application/pdf"流文件,在浏览器可以直接预览
3前端接收请求url返回的流数据 this.objectUrl=ateObjectURL(data) 
4<iframe v-if="objectUrl.length"id="pdf-content" :src="`:8081/pdf/web/viewer.html?file=${objectUrl}`"></iframe>