从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇文章为大家展示了怎么在vue中使用pdfjs显示PDF可复制,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
pdf显示的方法
方法一
使用embed标记来使用浏览器自带的pdf工具。
这种实现方式优缺点都很明显:
优点:自带“打印”,“搜索”,“翻页”等功能,强大且实现方便。
缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等。
方法二
使用Mozilla的PDF.js,自定义展示PDF。
基础功能集成
使用Text-Layers渲染(可实现pdf内容复制)
什么是PDF.JS
PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。
安装:
npm install pdfjs-dist
基础功能有两个必须引用的文件:
pdf.js
pdf.worker.js
如果使用CDN的方式,直接引用如下对应文件即可:
https://mozilla.github.io/pdf.js/build/pdf.js
https://mozilla.github.io/pdf.js/build/pdf.worker.js
如果使用npm的方式,则在需要使用PDF.js的文件中如下引用:
import PDFJS from 'pdfjs-dist'; PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';
这两个文件包含了获取、解析和展示PDF文档的方法,但是解析和渲染PDF需要较长的时间,可能会阻塞其它JS代码的运行。
为解决该问题,pdf.js依赖了HTML5引入的Web Workers——通过从主线程中移除大量CPU操作(如解析和渲染)来提升性能。
PDF.js的API都会返回一个Promise,使得我们可以优雅的处理异步操作。
使用
本文章只介绍在vue中的使用, 下面是自己写的展示pdf的组件可以直接拿去用
注:具体解释请看下面代码中的注释
上述内容就是怎么在vue中使用pdfjs显示PDF可复制,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图