使用Vue3+PDF.js实现PDF预览功能
更新时间：2022年12月24日 10:25:02 作者：YanaDH
项目中有一个需要预览下载pdf的需求,网上找了很久,决定使用 pdf.js 完成,下面这篇文章主要给大家介绍了关于使用Vue3+PDF.js实现PDF预览功能的相关资料,需要的朋友可以参考下
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行代码
总结
到此这篇关于使用Vue3+PDF.js实现PDF预览功能的文章就介绍到这了,更多相关Vue3 PDF.js实现PDF预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue 3 引入了 Composition API,其中 watchEffect 是一个非常强大的工具,用于响应式地追踪依赖项的变化,本文将详细介绍 watchEffect 的使用方法和相关概念,文中有详细的代码供大家参考,需要的朋友可以参考下2024-08-08
vue2使用el-date-picker实现动态日期范围demo
这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了详解从Vue-router到html5的pushState，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
async和await作为异步函数,语法很简单,就是在函数前面加上async 关键字,来表示它是异步的,下面这篇文章主要给大家介绍了如何通过一文教会你vue中使用async和await的相关资料,需要的朋友可以参考下2022-10-10
parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上。下面通过本文给大家介绍全新打包工具parcel零配置vue开发脚手架的相关知识，感兴趣的朋友一起看看吧2018-01-01
这篇文章主要为大家详细介绍了vue实现移动端悬浮窗效果，vuejs实现div拖拽移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金刚分别是State， Mutations，Actions，Getters，本文对这四大金刚做了详细介绍，本文重点是给大家介绍vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感兴趣的朋友一起看看吧2018-04-04
这篇文章主要介绍了关于Vue父子组件传参和回调函数的使用,我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件,需要的朋友可以参考下2023-05-05
前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,这篇文章主要给大家介绍了关于Vue3异步数据加载组件suspense的使用方法,suspense中文含义是悬念的意思,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了如何在 Vue 中使用 JSX，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-02-02
最新评论