位置: IT常识 - 正文
Vue3 + PDF.js 实现 PDF 预览(vue实现pdf下载)
编辑：rootadminVue3 + PDF.js 实现 PDF 预览 文章目录1 前言2 PDF 预览测试2.1 下载 PDF.js2.2 window.open 直接打开2.3 弹框形式打开3 修改配置项3.1 修改主题色为暗色系3.2 修改默认语言为简体中文3.3 打开 PDF 后默认跳转到某一页4 移除部分按钮4.1 简单按钮移除4.2 复杂按钮移除5 错误处理5.1 跨域报错5.2 默认语言为简体中文，但下载按钮仍显示为“Save”1 前言
本文链接地址:https://www.jiuchutong.com/zhishi/288808.html
转载请保留说明！
推荐整理分享Vue3 + PDF.js 实现 PDF 预览(vue实现pdf下载)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue pdf教程,vue-pdf,vue使用pdf.js,vue.js pdf下载,vue-pdf,vue使用pdf.js,vue3.0 pdf,vue3.0 pdf,内容如对您有帮助，希望把文章链接给更多的朋友！
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行代码
上一篇：温特弗灵附近的费灵加湖，德国巴伐利亚 (© Westend61/Getty Images)(温特孚灯具质量怎么样)
下一篇：pytorch :OSError: [WinError 1455] 页面文件太小，无法完成操作。 Error loading 【已解决】