Vue3 + PDF.js 实现 PDF 预览

最新推荐文章于 2024-03-13 16:39:34 发布
最新推荐文章于 2024-03-13 16:39:34 发布
阅读量8k 收藏 50
点赞数 15
分类专栏： Vue3 文章标签： pdf 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36757282/article/details/127691427
版权

文章目录

1 前言

PDF.js 官网

  • 本文使用的 PDF.js 版本为：v3.0.279
  • 本文未使用 npm 形式在项目中引入 PDF.js 依赖，因为该形式引入的 PDF.js 需要自己写额外页面样式及按钮，而直接在官网下载可以使用 PDF.js 默认提供的 viewer ，不用再增加额外代码，即可实现 PDF 预览等功能
# 使用 npm 形式在项目中引入 PDF.js 依赖
npm i pdfjs-dist
  • 效果预览
    在这里插入图片描述
    在这里插入图片描述

2 PDF 预览测试

2.1 下载 PDF.js

在 PDF.js 官网下载 PDF.js ，解压后放到 public/static 下
在这里插入图片描述

2.2 window.open 直接打开

// 默认打开 public/static/pdf/web/compressed.tracemonkey-pldi-09.pdf
// 测试 pdf 有点大，第一次打开可能会有点慢，只要有进度条就是正常加载中
window.open('static/pdf/web/viewer.html')
// 传入 pdf 文件地址
const fileUrl = 'xxx'
window.open('static/pdf/web/viewer.html?file=' + fileUrl)

2.3 弹框形式打开

<el-dialog v-model="dialogVisible">
  <iframe :src="'static/pdf/web/viewer.html?file=' + fileUrl"
    style="width: 100%; height: 440px"
  ></iframe>
</el-dialog>

3 修改配置项

3.1 修改主题色为暗色系

修改 public/static/pdf/web/viewer.js

AUTOMATIC: 0, // 跟随浏览器
LIGHT: 1, // 亮色
DARK: 2 // 暗色

在这里插入图片描述

3.2 修改默认语言为简体中文

修改 public/static/pdf/web/viewer.js
在这里插入图片描述

3.3 打开 PDF 后默认跳转到某一页

// 添加 #page=2 默认跳转到第二页
window.open('static/pdf/web/viewer.html?file=' + fileUrl + '#page=2')

4 移除部分按钮

4.1 简单按钮移除

例：移除[打印]按钮
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.2 复杂按钮移除

例：移除[文本]按钮，由于该按钮点击后会出现面板，所以除了移除当前按钮相关代码外，还要移除面板相关代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5 错误处理

5.1 跨域报错

在这里插入图片描述
注释 public/static/pdf/web/viewer.js 代码
在这里插入图片描述

5.2 默认语言为简体中文，但下载按钮仍显示为“Save”

修改 public/static/pdf/web/viewer.html 第159、276行代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

YanaDH
关注
  • 15
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 使用pdf.js 预览pdf
m0_67401851的博客
03-06 2080
Vue3 使用pdf.js 预览pdf 非专业 如有语术错误请谅解 写在前面：vue-pdf 好像并不支持Vue3 参考https://segmentfault.com/a/1190000039858927 本样例是基于后端返回的是文件流 直接上样例 首先下载pdf.js 注意：将解压后的文件放在static下 1.使用ifame嵌套 <iframe id='pdf' ref='pdf' height='100%' :src='pdfUrl'
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue3中使用pdf.js实现在线预览pdf文件流
北京-giser的博客
01-25 1123
Vue3中使用pdf.js实现在线预览pdf文件流。
Vue中使用pdf.js实现在线预览pdf文件流
qq_45585640的博客
09-07 6405
方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。此时，pdf文件已经被渲染成了一张图片。以上就是在Vue中使用pdf.js实现在线预览pdf文件流的详细步骤。使用pdf.js的Renderer渲染pdf文件。此时，pdf文件已经加载到了pdf对象中。方法获取pdf页面的视图大小。
vue3使用pdfjs-dist
最新发布
weixin_45847765的博客
03-13 1589
如果需要使用点击跳页的话，用一个变量控制 页码，然后在canvas上换成变量，每次跳页就+-数字就好，位置可以自己定位到需要位置。当前时间是可以使用的，刚实现过，后续如果不可以用了，可能是安装东西的版本迭代了。重新安装的时候版本不同了。如果不知道在哪，可以点开node_modules找到pdfjs-dist对应去改一下就好。然后 找到对应位置： // vite.config.ts 文件。版本会引起报各种错，需要注意，实在不行复制错误搜索就好。不分页的话加载过大文件时速度很慢，可以懒加载 ，也可以分页。
基于Vue2 + webpack + PDF.js版的PDF预览插件.zip
02-18
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
Vue3pdf中文文档
06-06
Vue3pdf中文教程
Vue3PDF预览（vue3-pdf-app）
Mr Dear的博客
04-20 1万+
适用于vue3的pdf预览组件，对vue3-pdf-app插件进行二次封装。
vue3 实现预览pdf的几种方式（vue3-pdf, iframe流展示，vue-office/pdf）
dj7858177的博客
07-20 1万+
要实现菜单（二级）绑定文件，并进行预览（点击菜单即触发），支持文件上传下载（绑定菜单）,文件以byte[]形式保存到数据库（至于为什么不用文件存储系统，因为这是领导定的 =，= 而且这个功能比较小，数据也不多，成本有限），同时，要解析pdf文件里的内容（固定模板），抓取部门段落信息单独保存；但是vue3-pdf通病，默认只展示第一页，所以需要获取页数，来通过v-for来把所有页都展示出来（如果页数多，再考虑做翻页操。vue3-pdf(因为是要作展示用，而且文档不是很多页，因此不考虑加入上下翻页，全展示)
【PDF.js】2023 最新 PDF.js 在 Vue3 中的使用
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-21 1万+
官方地址中文文档PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。pdf.js 是社区驱动的，并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。
vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
wang13679201813的博客
04-14 1万+
官网下载地址：https://mozilla.github.io/pdf.js/getting_started/#download.1、使用pdfjs已经写好的viewer.html页面。下载后将pdf.js 放到服务器上 如：http://xxxx:8080/static/pdfjs。这种方法需要从官网上将pdf.js包下载下来。pdf.worker.js:负责核心解析。通过插件docx-preview实现。2、将PDF文件渲染成Canvas。pdf.js: 负责API解析，
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
12-07
网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了备受推荐的pdf.js插件来实现。 pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（参考readme即可）。 不过更简单...
vue3.0借用vue-pdf-embed实现在线预览pdf文件
weixin_64310738的博客
02-16 1285
vue3.0借用vue-pdf-embed实现在线预览pdf文件
VUE,PDF.js在线预览pdf
qq_36659961的博客
03-19 3340
VUE实现PDF.js的pdf文件在线预览 首先，要实现PDF在线预览功能，需要PDF.js或者PDFObject.js插件，PDF.js可以实现统计阅读进度，PDFObject.js只是显示用的（这里才用的是统计阅读进度的方式实现在线PDF预览）。 1.导入插件，我是从官网直接下载，链接：点击打开链接，注意要放在static文件目录下。 这样webpack打包之后的路径也一 一对应。这样引入的...
Vue3实现PDF文件预览 （低版本浏览器兼容）
码农键盘上的梦
01-14 3110
/ 这里必须使用异步去引用pdf文件，直接去import会报错，也不知道为什么// 此文件位于public/testPdf.pdf// // 仅加载第一页 注释 取消页码切换// 加载pdf所有页})// 加载pdf的某一页// 缩放比例1;// 获取窗口大小// 这里transform的六个参数，使用的是transform中的Matrix(矩阵)// 进行渲染resolve();});});});
Vue3预览并打印PDF的两种方法
qing_jian0119的专栏
01-20 1万+
Vue3预览并打印PDF
vue3使用pdfjs预览pdf文件并显示水印
weixin_38389008的博客
06-09 2317
scale的值可以设置缩放比例，可以根据不同的pdf文件设置，例如word文件转成的pdf，或者ppt转成的pdf，宽高比是不一样的，我需求中的两种文件格式，目前1.2是相对效果最好的。然后设置pdf.worker.js文件的引入地址。以上两个属性，就可以正常显示水印了。首先在页面中引入pdfjs。要显示水印一定要配置。
超详细的vue3使用pdfjs教程
热门推荐
CherishTheYouth的博客
08-11 1万+
vue3中如何使用pdfjs来展示pdf文档 在项目开发中碰到一个需求是在页面中展示pdf预览功能，本人的项目使用的是vue3,实现pdf预览使用的是pdf预览神器 pdfjs 以下，将详细介绍如何在项目中使用pdfjs，主要包括以下内容： 单页pdf加载 多页pdf加载 pdf放大/缩小/大小重置 pdf分页展示以及上下翻页 pdf添加水印 动态添加pdf 从服务端获取pdf文件 参考资料: pdfjs源码及使用文档 1. 准备工作 1.1 pdfjs-dist 安装 百度搜索 npm pdfjs
vue用pdf.js实现对pdf浏览，并隐藏下载、打印
q249859693的博客
06-29 3993
vue用pdf.js实现对pdf浏览，并隐藏下载、打印
springboot+vue使用pdf.js实现保存在sftp 上的 pdf在线预览
05-24
实现步骤如下： 1. 在前端页面中引入pdf.js和pdf.worker.js，可以通过以下方式引入： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js"></script> ``` 2. 定义一个展示PDF的div，例如： ```html <div id="pdf-container"></div> ``` 3. 编写前端代码，通过ajax请求后端接口获取PDF文件并展示： ```javascript //获取PDF文件并展示 function showPdf() { //ajax请求获取PDF文件 $.ajax({ url: '/getPdf', //后端接口地址 type: 'GET', dataType: 'json', success: function(response) { //将PDF文件转成blob对象 const pdfBlob = new Blob([response], {type: 'application/pdf'}); //创建一个URL对象 const pdfUrl = URL.createObjectURL(pdfBlob); //加载PDF文件并展示 PDFJS.getDocument(pdfUrl).then(function(pdf) { pdf.getPage(1).then(function(page) { const canvas = document.getElementById('pdf-container'); const ctx = canvas.getContext('2d'); const viewport = page.getViewport({scale: 1}); canvas.width = viewport.width; canvas.height = viewport.height; page.render({canvasContext: ctx, viewport: viewport}); }); }); }, error: function(err) { console.error(err); } }); } ``` 在上述代码中，我们通过ajax请求后端接口获取到PDF文件的二进制流，然后将其转成Blob对象。接着，我们创建一个URL对象将Blob对象的URL作为参数传入。最后，通过pdf.js提供的API加载并展示PDF文件。 4. 在后端接口中获取PDF文件，并将其保存在SFTP上： ```java @GetMapping("/getPdf") @ResponseBody public ResponseEntity<byte[]> getPdf() { byte[] pdfBytes = null; try { //连接SFTP服务器 ChannelSftp sftp = SftpUtil.connectSftp(SFTP_HOST, SFTP_PORT, SFTP_USERNAME, SFTP_PASSWORD); //下载PDF文件 InputStream pdfStream = SftpUtil.downloadFile(sftp, SFTP_PATH, PDF_FILENAME); pdfBytes = IOUtils.toByteArray(pdfStream); //关闭SFTP连接 SftpUtil.disconnectSftp(sftp); } catch (Exception e) { e.printStackTrace(); } HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDispositionFormData("attachment", PDF_FILENAME); return new ResponseEntity<byte[]>(pdfBytes, headers, HttpStatus.OK); } ``` 在上述代码中，我们通过SftpUtil工具类连接SFTP服务器并下载PDF文件流，将其转成字节数组并返回给前端。同时，我们设置返回header的Content-Type为application/pdf，Content-Disposition为attachment，指定响应体的类型为PDF文件并指定下载文件名。 以上就是使用pdf.js实现保存在SFTP上的PDF文件在线预览的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值