当前位置: 首页 > news >正文

vue2 使用pdf.js 实现pdf预览,并可复制文本

        需求:pdf预览,并且可以选中pdf的内容进行复制。        

        在ruoyi的vue前端项目中用到,参考了网上不少文章,因为大部分没给具体的pdf.js版本,导致运行过程中报各种api 错误,经过尝试以下版本可用,故记录一下:

        安装依赖:

 npm  install pdfjs-dist@2.0.943

        vue 页面

<template><div><button @click="scalBig">放大</button><button @click="scalSmall">缩小</button><p>页码:{{ `${pageNo}/${totals.length}` }}</p><div class="drag-box" id="dragBox" @scroll="scrollfun($event)"><el-scrollbar><div class="wrapper" id="pdf-container"><div v-for="item in totals" :id="`page-${item}`" :key="item" class="pdf-box"><canvas :id="'canvas-pdf-' + item" class="canvas-pdf"></canvas></div></div></el-scrollbar></div></div>
</template><script>
const PDFJS = require('pdfjs-dist')
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min')
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
import axios from 'axios';
export default {name: 'showPdf',// props: ['pdfUrl'],data() {return {scale: 1.4,totals: [],pageNo: 1,viewHeight: 0,pdfUrl: 'http://localhost/a.pdf'}},mounted() {this.renderPdf(this.scale)},watch: {scale(val) {this.totals = []this.renderPdf(val)}},methods: {async downloadAndConvertToUint8Array(pdfUrl) {// 使用 axios 发送 GET 请求获取 PDF 文件数据const response = await axios({url: pdfUrl,method: 'GET',responseType: 'arraybuffer', // 设置响应类型为 arraybuffer});// 将 arraybuffer 转换为 Uint8Arrayconst uint8Array = new Uint8Array(response.data);return uint8Array;},renderPdf(scale) {this.downloadAndConvertToUint8Array(this.pdfUrl).then((uint8Array) => {console.log(uint8Array);// 现在你可以用这个 Uint8Array 对象进行进一步处理,例如传递给PDF.js库渲染PDF// 当 PDF 地址为跨域时,pdf 应该已流的形式传输,否则会出现pdf损坏无法展示PDFJS.getDocument(uint8Array).then(pdf => {// 得到PDF的总的页数let totalPage = pdf.numPageslet idName = 'canvas-pdf-'// 根据总的页数创建相同数量的canvasthis.createCanvas(totalPage, idName)for (let i = 1; i <= totalPage; i++) {pdf.getPage(i).then((page) => {let pageDiv = document.getElementById(`page-${i}`)let viewport = page.getViewport(scale)let canvas = document.getElementById(idName + i)let context = canvas.getContext('2d')canvas.height = viewport.heightcanvas.width = viewport.widththis.viewHeight = viewport.heightlet renderContext = {canvasContext: context,viewport}// 如果你只是展示pdf而不需要复制pdf内容功能,则可以这样写render// page.render(renderContext) 如果你需要复制则像下面那样写利用text-layerpage.render(renderContext).then(() => {return page.getTextContent()}).then((textContent) => {// 创建文本图层divconst textLayerDiv = document.createElement('div')textLayerDiv.setAttribute('class', 'textLayer')// 将文本图层div添加至每页pdf的div中pageDiv.appendChild(textLayerDiv)// 创建新的TextLayerBuilder实例let textLayer = new TextLayerBuilder({textLayerDiv: textLayerDiv,pageIndex: page.pageIndex,viewport: viewport})textLayer.setTextContent(textContent)textLayer.render()})})}})}).catch((error) => {console.error('Error downloading or converting the PDF:', error);});},createCanvas(totalPages) {for (let i = 1; i <= totalPages; i++) {this.totals.push(i)}},// 分页scrollfun(e) {let scrollTop = e.target.scrollTopif (scrollTop === 0) {this.pageNo = 1} else {this.pageNo = Math.ceil(scrollTop / this.viewHeight)}},// 放大scalBig() {this.scale = this.scale + 0.1},// 缩小scalSmall() {if (this.scale > 1.2) {this.scale = this.scale - 0.1}}}
}
</script><style scoped lang="scss">
.drag-box {height: 800px;
}.pdf-box {position: relative;
}.el-scrollbar__wrap {overflow-x: hidden;
}
</style>

        运行效果:

   

         

相关文章:

vue2 使用pdf.js 实现pdf预览,并可复制文本

需求&#xff1a;pdf预览&#xff0c;并且可以选中pdf的内容进行复制。 在ruoyi的vue前端项目中用到&#xff0c;参考了网上不少文章&#xff0c;因为大部分没给具体的pdf.js版本&#xff0c;导致运行过程中报各种api 错误&#xff0c;经过尝试以下版本可用&#xff0c…...

REPLACE INTO

简介 在数据库中&#xff0c;REPLACE INTO 是一种用于插入或更新数据的&#xff08;DML&#xff09; SQL 语句。它与 INSERT INTO 语句类似&#xff0c;但具有一些特殊的行为。 语法 REPLACE INTO table_name (column1, column2, ...) VALUES (value1, value2, ...); repla…...

idea 安装免费Ai工具 codeium

目录 概述 ide安装 使用 chat问答 自动写代码 除此外小功能 概述 这已经是我目前用的最好免费的Ai工具了&#xff0c;当然你要是有钱最好还是用点花钱的&#xff0c;比如copilot&#xff0c;他可以在idea全家桶包括vs&#xff0c;还有c/c的vs上运行&#xff0c;还贼强&am…...

关于C#中的Select与SelectMany方法

Select 将序列中的每个元素投影到新表单。 实例1 IEnumerable<int> squares Enumerable.Range(1, 10).Select(x > x * x);foreach (int num in squares) {Console.WriteLine(num); } /*This code produces the following output:149162536496481100 */ 实例2 str…...

CentOS上安装Mellanox OFED

打开Mellanox官网下载驱动 Linux InfiniBand Drivers 点击下载链接跳转至 Tgz解压缩执行 ./mlnxofedinstall发现缺少模块 # ./mlnxofedinstall Logs dir: /tmp/MLNX_OFED_LINUX.11337.logs General log file: /tmp/MLNX_OFED_LINUX.11337.logs/general.log Verifying KMP rpm…...

无/自监督去噪(1)——一个变迁:N2N→N2V→HQ-SSL

目录 1. 前沿2. N2N3. N2V——盲点网络&#xff08;BSNs&#xff0c;Blind Spot Networks&#xff09;开创者3.1. N2V实际是如何训练的&#xff1f; 4. HQ-SSL——认为N2V效率不够高4.1. HQ-SSL的理论架构4.1.1. 对卷积的改进4.1.2. 对下采样的改进4.1.3. 比N2V好在哪&#xff…...

【24.1.19】

24.1.19 本周工作内容下周工作计划 本周工作内容 本周的话主要的一个工作还是第三部分页面部分的完成工作&#xff0c;那就先来汇报一下第三部分的工作进度&#xff0c;第三部分的页面工作呢已经完成啦&#xff0c;就在刚刚提交啦全部的代码&#xff0c;那么这一部分的工作呢也…...

使用mamba替换conda和anaconda配置环境安装软件

使用mamba替换miniconda和anaconda&#xff0c;原因是速度更快&#xff0c;无论是创建新环境还是激活环境 conda、mamba、anaconda都是蟒蛇的意思… 下载mambaforge wget https://github.com/conda-forge/miniforge/releases/latest/download/Mambaforge-Linux-x86_64.sh ba…...

鸿蒙开发系列教程(四)--ArkTS语言:基础知识

1、ArkTS语言介绍 ArkTS是HarmonyOS应用开发语言。它在保持TypeScript&#xff08;简称TS&#xff09;基本语法风格的基础上&#xff0c;对TS的动态类型特性施加更严格的约束&#xff0c;引入静态类型。同时&#xff0c;提供了声明式UI、状态管理等相应的能力&#xff0c;让开…...

Pix2Pix理论与实战

本文为&#x1f517;365天深度学习训练营 中的学习记录博客 原作者&#xff1a;K同学啊|接辅导、项目定制 我的环境&#xff1a; 1.语言&#xff1a;python3.7 2.编译器&#xff1a;pycharm 3.深度学习框架Pytorch 1.8.0cu111 一、引入 在之前的学习中&#xff0c;我们知道…...

[GN] 后端接口已经写好 初次布局前端需要的操作(例)

提示&#xff1a;前端项目一定要先引入组件 配置。再编码&#xff01;&#xff01;&#xff01;&#xff01; 文章目录 使用 vue-cli 脚手架初始化前端工程化配置引入Vue前端组件库 -- arco前后端联调引入Md 编辑器组件 使用 vue-cli 脚手架初始化 使用安装脚手架工具&#xf…...

AIGC:人工智能驱动的数据分析新时代

AIGC&#xff1a;人工智能驱动的数据分析新时代 随着人工智能技术的迅猛发展&#xff0c;我们正迎来数据分析的新时代&#xff0c;其中AIGC&#xff08;Artificial Intelligence with Generative Capabilities&#xff09;的应用成为引领潮流的重要方向。本文将深入探讨几个关…...

Windows Qt C++ VTK 借助msys环境搭建

本示例仅仅是搭建环境&#xff0c;后续使用还得大佬指导。 Qt 6.6.0 MinGW 64bit 借助msys2 来安装VTK 包&#xff0c;把*.dll 链接进来&#xff0c;就可以用了。 先安装VTK 包。 Package: mingw-w64-x86_64-vtk - MSYS2 Packages 执行 pacman 命令&#xff1a;pacman -…...

尚硅谷Nginx高级配置笔记

写在前面&#xff1a;本笔记是学习尚硅谷nginx可成的时候的笔记&#xff0c;不是原创&#xff0c;如有需要&#xff0c;可以去官网看视频&#xff0c;以下是pdf文件 Nginx高级 第一部分&#xff1a;扩容 通过扩容提升整体吞吐量 1.单机垂直扩容&#xff1a;硬件资源增加 云…...

论rtp协议的重要性

rtp ps流工具 rtp 协议&#xff0c;实时传输协议&#xff0c;为什么这么重要&#xff0c;可以这么说&#xff0c;几乎所有的标准协议都是国外创造的&#xff0c;感叹一下&#xff0c;例如rtsp协议&#xff0c;sip协议&#xff0c;webrtc&#xff0c;都是以rtp协议为基础&#…...

【Github搭建网站】零基础零成本搭建个人Web网站~

Github网站&#xff1a;https://github.com/ 这是我个人搭建的网站&#xff1a;https://xf2001.github.io/xf/ 大家可以搭建完后发评论区看看&#xff01;&#xff01;&#xff01; 搭建教程&#xff1a;https://www.bilibili.com/video/BV1xc41147Vb/?spm_id_from333.999.0.0…...

unocss+iconify技术在vue项目中使用20000+的图标

安装依赖 npm i unocss iconify/json配置依赖 vue.config.js文件 uno.config.js文件 main.js文件 使用 <i class"i-fa:user"></i> <i class"i-fa:key"></i>class名是 i- 开头&#xff0c;跟库名:图标名&#xff0c;那都有什么库…...

python 自动化模块 - pyautogui初探

python 自动化模块 - pyautogui 引言一、安装测试二、简单使用三、常用函数总结 引言 在画图软件中使用pyautogui拖动鼠标&#xff0c;画一个螺旋式的正方形 - (源码在下面) PyAutoGUI允许Python脚本控制鼠标和键盘&#xff0c;以自动化与其他应用程序的交互。API的设计非常简…...

UE5 蓝图编辑美化学习

虚幻引擎中干净整洁蓝图的15个提示_哔哩哔哩_bilibili 1.双击线段成节点。 好用&#xff0c;爱用 2.用序列节点 好用&#xff0c;爱用 3.用枚举。 好用&#xff0c;能避免一些的拼写错误 4.对齐节点 两点一水平线 5.节点上下贴节点 &#xff08;以前不懂&#xff0c;现在经常…...

基于动态顺序表实现通讯录项目

本文中&#xff0c;我们将使用顺序表的结构来完成通讯录的实现。 我们都知道&#xff0c;顺序表实际上就是一个数组。而使用顺序表来实现通讯录&#xff0c;其内核是将顺序表中存放的数据类型改为结构体&#xff0c;将联系人的信息存放到结构体中&#xff0c;通过对顺序表的操…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...