好资源导航 » 文章资讯 » vue使用pdfjs显示PDF可复制的实现方法

vue使用pdfjs显示PDF可复制的实现方法

2023-09-02 21:37:05 287

pdf显示的方法

方法一

使用embed标记来使用浏览器自带的pdf工具。

这种实现方式优缺点都很明显：

优点：自带“打印”，“搜索”，“翻页”等功能，强大且实现方便。

缺点：不同浏览器的pdf工具样式不一，且无法满足个性化需求，比如：禁止打印，下载等。

方法二

使用Mozilla的PDF.js，自定义展示PDF。

基础功能集成
使用Text-Layers渲染(可实现pdf内容复制)

什么是PDF.JS

PDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它可以在现代浏览器中使用且无需安装任何第三方插件。

安装：

npminstallpdfjs-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的文件中如下引用:

importPDFJSfrom'pdfjs-dist';

PDFJS.GlobalWorkerOptions.workerSrc='pdfjs-dist/build/pdf.worker.js';

这两个文件包含了获取、解析和展示PDF文档的方法，但是解析和渲染PDF需要较长的时间，可能会阻塞其它JS代码的运行。

为解决该问题，pdf.js依赖了HTML5引入的WebWorkers——通过从主线程中移除大量CPU操作（如解析和渲染）来提升性能。

PDF.js的API都会返回一个Promise，使得我们可以优雅的处理异步操作。

使用

本文章只介绍在vue中的使用,下面是自己写的展示pdf的组件可以直接拿去用

注：具体解释请看下面代码中的注释






.drag-box{
height:800px;
}
.pdf-box{
position:relative;
}
.el-scrollbar__wrap{
overflow-x:hidden;
}

pdf.js实现展示和复制PDF内容介绍到这里，后续会继续更新实现下载、打印等功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com