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

且听狂澜度三秋呀呀呀呀

已于 2022-11-29 16:38:04 修改

阅读量1.3k

点赞数

分类专栏： Vue Jasper Report 文章标签： javascript vue.js pdf

于 2022-11-29 16:37:42 首次发布

本文链接：https://blog.csdn.net/qq_42797527/article/details/128096181

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Jasper Report

5 篇文章 9 订阅

订阅专栏

1官方文档:pdf.js

2效果图:

在这里插入图片描述

3使用指南

参考博客:
https://blog.csdn.net/qq_37122349/article/details/127572375?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-127572375-blog-108522343.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-127572375-blog-108522343.pc_relevant_default&utm_relevant_index=5

4对接后端代码

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

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