2023 最新 PDF.js 在 Vue3 中的使用

因为自己写业务要定制各种 pdf 预览情况（可能），所以采用了 pdf.js 而不是各种第三方封装库，主要还是为了更好的自由度。

一、PDF.js 介绍

官方地址
中文文档

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。
pdf.js 是社区驱动的，并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。

二、 安装方法

1、下载 pdf.js

下载地址
在这里插入图片描述
我下载的版本是 pdfjs-4.0.189-dist
在这里插入图片描述

2、解压包并放到项目中

解压后将完整文件夹放到 vue3 的 public 文件夹内
在这里插入图片描述

3、屏蔽跨域错误，允许跨域

在 web/viewer.mjs 内找到搜索 throw new Error("file origin does not match viewer's") 并注释掉，如果不注释，可能会出现跨域错误，无法正常预览文件。
在这里插入图片描述
这样就算安装完成了，后面我们开始在项目中使用。

三、基础使用

1、创建 PDF 组件

我们可以创建一个 PDF 组件，代码如下：

<script setup lang="ts">
import { onMounted, ref } from 'vue';
interface Props {url: string; // pdf文件地址
}
const props = defineProps<Props>();
const pdfUrl = ref(''); // pdf文件地址
const fileUrl = '/pdfjs-4.0.189-dist/web/viewer.html?file='; // pdfjs文件地址onMounted(() => {// encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。// 核心就是将 iframe 的 src 属性设置为 pdfjs 的地址，然后将 pdf 文件的地址作为参数传递给 pdfjs// 例如：http://localhost:8080/pdfjs-4.0.189-dist/web/viewer.html?file=http%3A%2F%2Flocalhost%3A8080%2Fpdf%2Ftest.pdfpdfUrl.value = fileUrl + encodeURIComponent(props.url);
});
</script><template><div class="container"><iframe :src="pdfUrl" width="100%" height="100%"></iframe></div>
</template><style scoped lang="scss">
.container {width: 100%;height: 100%;
}
</style>

2、使用组件

比如我们需要预览 public 下的一个 test.pdf 文件

<div class="pdf-box"><PDF url="/public/test.pdf" />
</div>

下面是界面默认预览效果
在这里插入图片描述

四、进阶使用

1、页面跳转（传参）

比如我们要跳到第 10 页，我们可以在地址里面添加参数 &page=${10}

pdfUrl.value = fileUrl + encodeURIComponent(props.url) + `&page=${10}`;

在 viewer.mjs 找到 setInitialView 函数，注意是下面这个：
在这里插入图片描述
重点：在函数末尾最下面添加下面的跳转代码（写在上面会报错，因为还没有获取到实例）

    console.log(this.pdfViewer);// 获取url参数function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split('&');for (var i = 0; i < vars.length; i++) {var pair = vars[i].split('=');if (pair[0] == variable) {return pair[1];}}return false;}// 跳转到指定页const page = getQueryVariable('page');console.log(page);if (page) {this.pdfViewer.currentPageNumber = Number(page);}

2、文本标注（传参）

某些时候我们需要跳转到指定页面，然后自动标注文本，这个时候就需要自动标注了
在这里插入图片描述
代码跟跳转一样，写在后面就可以了

    // 自动高亮文本（要解码）decodeURIComponent: 解码const markText = decodeURIComponent(getQueryVariable('markText'));console.log('markText===>', markText);if (markText) {// 对查询输入框进行赋值document.getElementById('findInput').value = markText;// 点击高亮按钮实现高亮显示关键词document.getElementById('findHighlightAll').click();}

目前我还没有找到批量标注的办法，批量标注建议还是使用下面页面+坐标，遮罩的方法
在这里插入图片描述

3、添加遮罩高亮（页码+坐标）

主要是为了解决批量标注的问题，因为 pdfjs 原生只支持单文本，不支持批量，要修改大量源码（我能力不行，太难了😥）

所以还是换了种方案，就是后端返回页码+坐标，添加遮罩层渲染的方式。

这种方法主要是找到渲染的 dom元素，因为渲染的pdf有一个叫做 data-page-number="1" 的属性，因此我们可以通过 js 的 querySelectorAll 选择器找到对应属性的 dom 元素，然后再操作添加遮罩就可以了，代码放在下面。
在这里插入图片描述

    // 测试的坐标const content_pos_1 = {x: 0.5135954145019941,y: 0.4662730487881233,};const content_pos_2 = {x: 0.7135954145019941,y: 0.8662730487881233,};// 查找属性 data-page-number='页码' 的 dom 元素const pageList = document.querySelectorAll(`[data-page-number='${page}']`);console.log('查询到的dom列表===>\n', pageList[1]);// 查询到的第一个是左侧小菜单页码div，第二个是才是展示的divconst pageView = pageList[1];console.log('右侧展示的dom===>\n', pageView);// 在元素上画一个divconst div = document.createElement('div');div.style.width = (content_pos_2.x - content_pos_1.x) * 100 + '%';div.style.height = (content_pos_2.y - content_pos_1.y) * 100 + '%';div.style.backgroundColor = 'rgb(255, 255, 0, 0.1)';div.style.position = 'absolute';div.style.top = content_pos_1.y * 100 + '%';div.style.left = content_pos_1.x * 100 + '%';div.style.zIndex = '1'; // pdfjs 文本的层级是2 所以这里要设置为1 放着不能复制pageView.appendChild(div);

渲染到pdf上就是下面的样子：
在这里插入图片描述

4、添加遮罩高亮（缩放动态更新）

因为 pdf 会缩放的缘故，缩放的话会重新更新 pdf ，我们添加的 div 就会消失，所以我们要在重新更新的时候重新添加，源码内部重新添加的函数在这个位置： #updateUIState
在这里插入图片描述
我们只需要将修改后重新添加的代码放在尾部就行
首先我们要修改第三部分的代码

   // 测试的坐标const content_pos_1 = {x: 0.5135954145019941,y: 0.4662730487881233,};const content_pos_2 = {x: 0.7135954145019941,y: 0.8662730487881233,};// pdf 缩放会重新设置，所以放在window保存，其他地方要用window.page = page;window.shade = {width: (content_pos_2.x - content_pos_1.x) * 100 + '%',height: (content_pos_2.y - content_pos_1.y) * 100 + '%',top: content_pos_1.y * 100 + '%',left: content_pos_1.x * 100 + '%',};console.log(window.shade);// 查找属性 data-page-number='页码' 的 dom 元素const pageList = document.querySelectorAll(`[data-page-number='${page}']`);console.log('查询到的dom列表===>\n', pageList[1]);// 查询到的第一个是左侧小菜单页码div，第二个是才是展示的divconst pageView = pageList[1];console.log('右侧展示的dom===>\n', pageView);// 在元素上画一个divconst div = document.createElement('div');div.id = 'shade';div.style.width = window.shade.width;div.style.height = window.shade.height;div.style.backgroundColor = 'rgb(255, 255, 0, 0.1)';div.style.position = 'absolute';div.style.top = window.shade.top;div.style.left = window.shade.left;div.style.zIndex = '1';pageView.appendChild(div);

然后在 #updateUIState 函数的末尾添加下面的新增代码

    setTimeout(() => {if (!window.page) return;const pageList = document.querySelectorAll(`[data-page-number='${window.page}']`);const pageView = pageList[1];// 删除 id 为 shade 的元素（旧遮罩）const shade = document.getElementById('shade');if (shade) {shade.remove();}const div = document.createElement('div');div.id = 'shade';div.style.width = window.shade.width;div.style.height = window.shade.height;div.style.backgroundColor = 'rgb(255, 255, 0, 0.1)';div.style.position = 'absolute';div.style.top = window.shade.top;div.style.left = window.shade.left;div.style.zIndex = '1';pageView.appendChild(div);}, 500);

最终效果如下：
在这里插入图片描述
ps：如果要做大量的页面+坐标渲染（后端返回的是个数组），修改下上面的代码逻辑就行，传参自己写，不难的

当然，也可以看下面的代码哈哈哈，我还是写出来吧

5、添加遮罩高亮（数组批量跨页渲染）

假设后端返回的数据格式是这样的，是一个包含 页码、坐标的标注数组，我们需要在每个页码内渲染遮罩
在这里插入图片描述

我们就需要这样传参
在这里插入图片描述
setInitialView(storedHash, { rotation, sidebarView, scrollMode, spreadMode } = {}) 初始化函数中：

    window.content_pos = JSON.parse(decodeURIComponent(getQueryVariable('content_pos')));console.log(window.content_pos[0]);window.content_pos.forEach((item, index) => {const page = item.page_no;const shade = {width: (item.right_bottom.x - item.left_top.x) * 100 + '%',height: (item.right_bottom.y - item.left_top.y) * 100 + '%',top: item.left_top.y * 100 + '%',left: item.left_top.x * 100 + '%',};console.log(shade);const pageList = document.querySelectorAll(`[data-page-number='${page}']`);const pageView = pageList[1];const div = document.createElement('div');div.id = 'shade' + index;div.style.width = shade.width;div.style.height = shade.height;div.style.backgroundColor = 'rgb(255, 255, 0, 0.1)';div.style.position = 'absolute';div.style.top = shade.top;div.style.left = shade.left;div.style.zIndex = '1';pageView.appendChild(div);});

#updateUIState(resetNumPages = false) 更新函数中：

    setTimeout(() => {if (window.content_pos) {window.content_pos.forEach((item, index) => {const shadeEl = document.getElementById('shade' + index);if (shadeEl) {shadeEl.remove();}const page = item.page_no;const shade = {width: (item.right_bottom.x - item.left_top.x) * 100 + '%',height: (item.right_bottom.y - item.left_top.y) * 100 + '%',top: item.left_top.y * 100 + '%',left: item.left_top.x * 100 + '%',};const pageList = document.querySelectorAll(`[data-page-number='${page}']`);const pageView = pageList[1];const div = document.createElement('div');div.id = 'shade' + index;div.style.width = shade.width;div.style.height = shade.height;div.style.backgroundColor = 'rgb(255, 255, 0, 0.1)';div.style.position = 'absolute';div.style.top = shade.top;div.style.left = shade.left;div.style.zIndex = '1';pageView.appendChild(div);});}}, 500);

效果展示，可以实现跨页，多页渲染
在这里插入图片描述

后续根据开发业务持续更新😁

感谢大佬们的无私分享

详细|vue中使用PDF.js预览文件实践
vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
pdf.js根据路径里传参数高亮显示关键字（跳转到对应页面）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/167901.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

人工智能教程（二）：人工智能的历史以及再探矩阵

人工智能教程（二）：人工智能的历史以及再探矩阵

目录 前言 更多矩阵的知识 Pandas 矩阵的秩 前言 在上一章中&#xff0c;我们讨论了人工智能、机器学习、深度学习、数据科学等领域的关联和区别。我们还就整个系列将使用的编程语言、工具等做出了一些艰难的选择。最后&#xff0c;我们还介绍了一点矩阵的知识。在本文中&am…
阅读更多...
vue打包上传服务器的总结笔记

vue打包上传服务器的总结笔记

经历了3个小时教训&#xff0c;还是自己总结一下吧&#xff0c;致未来傻x的自己。 第一步&#xff0c;打开b站。搜索【vue打包】找到一个视频教程 前端Vue项目打包部署实战教程_哔哩哔哩_bilibili 这步是在看不懂下面操作的情况下用的 第一步&#xff1a;找到nginx的配置文件…
阅读更多...
需求变更导致估算不精准 6大措施

需求变更导致估算不精准 6大措施

需求变更可能导致估算不精准、项目成本增加、进度延迟等问题&#xff0c;如果不能准确地估算项目&#xff0c;往往会造成资源浪费和开发效率的降低&#xff0c;因此亟需解决因需求变更导致地估算不精准的问题。 一般来说&#xff0c;主要是从以下6个方面入手解决&#xff1a; 1…
阅读更多...
【maven】【IDEA】idea中使用maven编译项目，报错java: 错误: 找不到符号 【2】

【maven】【IDEA】idea中使用maven编译项目，报错java: 错误: 找不到符号 【2】

idea中使用maven编译项目，报错java: 错误: 找不到符号 错误状况展示： 如果报这种错，是因为项目中真的找不到报错的方法或者枚举 字段之类的，但实际是 ： 点击 File Path
阅读更多...
OSG粒子系统与阴影-雾效模拟（1）

OSG粒子系统与阴影-雾效模拟（1）

虚拟现实中有很多效果&#xff0c;如雨效、雪效、雾效等&#xff0c;这些都可以通过粒子系统来实现。一个真实的粒子系统的模式能使三维场景达到更好的效果。 本章对OSG粒子系统的使用以及生成自定义粒子系统的方法进行了详细介绍最后还附带说明了阴影的使用方法。在实时的场景…
阅读更多...
（HAL库版）freeRTOS移植STMF103

（HAL库版）freeRTOS移植STMF103

正点原子关于freeRTOS的教程是比较好的&#xff0c;可惜移植的是标准库&#xff0c;但是我学的是Hal库&#xff0c;因为开发速度更快&#xff0c;从最后那个修改SYSTEM文件夹的地方开始替换为下面的内容就可以了 5.修改Systick中断、SVC中断、PendSV中断 将SVC中断、P…
阅读更多...
pairplot

pairplot

Python可视化 | Seaborn5分钟入门(七)——pairplot - 知乎 (zhihu.com) Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matplotlib的基础上进行了更高级的API封装&#xff0c;从而使得作图更加容易&#xff0c;不需…
阅读更多...
红黑树详解

红黑树详解

红黑树的概念与性质 前置知识 在学习红黑树之前&#xff0c;最好有二叉查找树和AVL树的基础&#xff0c;因为红黑树本质就是一种特殊的二叉查找树&#xff0c;而红黑树的操作中需要用到AVL树中旋转的相关知识。至于二叉查找树和AVL树&#xff0c;可以参考如下两篇博客&#xf…
阅读更多...
oracle安装的肘腋之疾小合集

oracle安装的肘腋之疾小合集

#临时空间指定 export TMP/tmp export TMPDIR/tmp #图形化显示框不全 java问题&#xff0c;使用系统自带的jre ./runInstaller -jreLoc/usr/local/jdk1.7.0_80/ #ins30131 Failed to access the temporary location 给/tmp/CVU*加x权限 #linux桌面太小 xrandr -s 1440x900_60…
阅读更多...
Matplotlib图形注释_Python数据分析与可视化

Matplotlib图形注释_Python数据分析与可视化

Matplotlib图形注释 添加注释文字、坐标变换 有的时候单单使用图形无法完整清晰的表达我们的信息&#xff0c;我们还需要进行文字进行注释&#xff0c;所以matplotlib提供了文字、箭头等注释可以突出图形中重点信息。 添加注释 为了使我们的可视化图形让人更加容易理解&#…
阅读更多...
vue中父组件直接调用子组件方法

vue中父组件直接调用子组件方法

vue2 中&#xff0c;父组件如何调用子组件的方法 在Vue 2中&#xff0c;父组件可以通过使用ref属性来引用子组件的实例&#xff0c;然后通过该实例调用子组件的方法。 首先&#xff0c;在父组件的模板中&#xff0c;给子组件添加一个ref属性&#xff1a; <template>&l…
阅读更多...
在工业生产环境下，服务器没有互联网，如何通过代理自己的电脑上互联网？

在工业生产环境下，服务器没有互联网，如何通过代理自己的电脑上互联网？

服务器主机是CentOS7操作系统.&#xff0c;服务器的局域网是10.0.6.x网段。我的笔记本的以太网口的局域网ip是也是10.0.6.x&#xff0c;由于这个10.0.6.x的整个局域网是没有拨号上网的所有无法访问互联网。 但是&#xff0c;如果笔记本脸上wifi&#xff0c;wifi的网段是192.168…
阅读更多...
长度最小的子数组

长度最小的子数组

给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&#xff1a; 输入&#x…
阅读更多...
MySQL 有多个普通索引时会取哪一个索引？

MySQL 有多个普通索引时会取哪一个索引？

我们都知道MySQL在查询时底层会进行索引的优化&#xff0c;假设有两个普通索引&#xff0c;且where 后面也根据这两个普通索引查询数据&#xff0c;那么执行查询语句时会使用到那个索引&#xff1f; 为了方便演示&#xff0c;新建users表&#xff0c;新建idx_name、idx_city这两…
阅读更多...
前端vue导出PPT，使用pptxgen.js

前端vue导出PPT，使用pptxgen.js

前言 公司新需求需要导出ppt给业务用&#xff0c;查阅资料后发现也挺简单的&#xff0c;记录一下。 如有不懂的可以留言&#xff01;&#xff01;&#xff01; 1.安装包 npm install pptxgenjs --save2.引入包 在需要使用的文件中引入 import Pptxgenfrom "pptxgenjs&…
阅读更多...
Oracle研学-介绍及安装

Oracle研学-介绍及安装

一 ORACLE数据库特点: 支持多用户&#xff0c;大事务量的事务处理数据安全性和完整性控制支持分布式数据处理可移植性(跨平台&#xff0c;linux转Windows) 二 ORACLE体系结构 数据库&#xff1a;oracle是一个全局数据库&#xff0c;一个数据库可以有多个实例&#xff0c;每个…
阅读更多...
nodejs+vue＋python＋PHP+微信小程序-留学信息查询系统的设计与实现-安卓-计算机毕业设计

nodejs+vue＋python＋PHP+微信小程序-留学信息查询系统的设计与实现-安卓-计算机毕业设计

1、用户模块&#xff1a; 1&#xff09;登录&#xff1a;用户注册登录账号。 2&#xff09;留学查询模块&#xff1a;查询学校的入学申请条件、申请日期、政策变动等。 3&#xff09;院校排名&#xff1a;查询国外各院校的实力排名。 4&#xff09;测试功能&#xff1a;通过入学…
阅读更多...
Spring Boot WebSocket 客户端

Spring Boot WebSocket 客户端

介绍 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议&#xff0c;它可以提供实时的、双向的数据传输。Spring Boot 提供了对 WebSocket 的支持&#xff0c;我们可以使用 Spring Boot WebSocket 客户端来连接到 WebSocket 服务器&#xff0c;并进行实时通信。 本文将…
阅读更多...
python-选择排序

python-选择排序

选择排序是一种简单直观的排序算法&#xff0c;它的基本思想是每一轮选择未排序部分的最小元素&#xff0c;然后将其放到已排序部分的末尾。这个过程持续进行&#xff0c;直到整个数组排序完成。(重点&#xff1a;通过位置找元素) 以下是选择排序的详细步骤和 Python 实现&…
阅读更多...
HarmonyOS应用开发实战—登录页面【ArkTS】

HarmonyOS应用开发实战—登录页面【ArkTS】

文章目录 本页面实战效果预览图一.HarmonyOS应用开发1.1HarmonyOS 详解1.2 ArkTS详解二.HarmonyOS应用开发实战—登录页面【ArkTS】2.1 ArkTS页面源码2.2 代码解析2.3 心得本页面实战效果预览图 一.HarmonyOS应用开发 1.1HarmonyOS 详解 HarmonyOS（鸿蒙操作系统）是华为公司…
阅读更多...
最新文章

Copyright @ 2022~2023