记使用pdf.js过程遇到的坑

最近项目中需要用到js库来渲染pdf文件,调研后发现无论是reach-pdf.js或者是svelte-pdf.js都是在pdf.js基础上做了些许精简,反而功能还不如原始的pdf.js来得全面。但是原始的库几乎没有像样的代码示例,而能搜索到的大多数代码不少都是十几年前的了,在这个过程中踩了不少坑,做个记录,希望对看到的人有所帮助。

使用npm安装pdfjs-dist库(也可以直接下载源码并引入)

npm install pdfjs-dist

导入库

// 网上很多代码都是import xxx from 'pdfjs-dist';
// 而xxx一般都是过期或者不存在的,直接把所有导出为pdfjslib即可
import * as pdfjslib from 'pdfjs-dist';
// 注意需要设置这个参数
pdfjslib.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';

单页渲染,多页渲染在下面代码基础上直接添加一个循环即可

let src = 'xxx.pdf';
let pageNum = 1;
let scale_ratio = 1.5;async function renderPage() {const pdf = await pdfjsLib.getDocument(src).promise;const page = await pdf.getPage(pageNum);const viewport = page.getViewport({ scale: scale_ratio });const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;const renderContext = {canvasContext: context,viewport: viewport};await page.render(renderContext);}

注意渲染完的pdf只有图片形式,使用开发者工具看网页的结构只有canvas组件,想要实现文字的选择和复制还需要在上面渲染一层文字层。

// 需要引入样式文件,不然文字不会悬浮在cavas组件上
import 'pdfjs-dist/web/pdf_viewer.css';async function renderFullPage(){const pdf = await pdfjsLib.getDocument(src).promise;const pdfContainer = document.createElement('div');pdfContainer.style.setProperty('--scale-factor', scale_ratio);for (let i=1; i<=pdf.numPages; i++){const pageNumber = i;const page = await pdf.getPage(pageNumber);const viewport = page.getViewport({scale: scale_ratio});const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.height = viewport.height ;canvas.width = viewport.width ;const renderContext = {canvasContext: context,viewport: viewport};await page.render(renderContext);// canvasWrapper 可加可不加const canvasWrapper = document.createElement('div');canvasWrapper.className = 'canvasWrapper';canvasWrapper.appendChild(canvas);const textContent = await page.getTextContent();const textLayerDiv = document.createElement('div');// 类名严格为:textLayertextLayerDiv.className = `textLayer`;pdfjsLib.renderTextLayer({textContentSource: textContent,container: textLayerDiv,viewport: viewport,textDivs: []});const pageDiv = document.createElement('div');pageDiv.className = 'page';// 需要设置 position: relative// 否则全部文字可能都挤在第一页pageDiv.style = "position: relative; margin-bottom:10px";pageDiv.appendChild(canvasWrapper);pageDiv.appendChild(textLayerDiv);pdfContainer.appendChild(pageDiv);}}

简单来说就是在渲染完canvas代码之后,再渲染出文字层。有几个注意点:

  1. 需要在开头引入样式表,不然文字层会实际显示在页面中,不会悬浮不会透明;
  2. 需要在外面的组件中设置参数–scale-factor,用于保证图片和文字的位置对应,否则调整了scale_ratio后图片尺寸改变,但是文字层的大小还是不变;
  3. 文字层的类名需要严格设置为textLayer,从开头引入的样式表中可以看到;
  4. 包含canvas和文字层的父组件需要设置style为position: relative,否则多页的文字都会渲染到第一页中。

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

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

相关文章

在澳门写代码;技术入股2次融资被踢;现在只想做独立开发

本期我们邀请的程序员是Albert&#xff0c;先后在广州、澳门、珠海、香港工作过&#xff0c;打工上班、合伙创业、远程工作、独立开发&#xff0c;工作经历丰富&#xff0c;如果你想知道哪些程序员踩过的坑&#xff0c;请别错过他的故事。 广州&#xff1a;第一份工作2000块一…

C++ 结构体内存对齐

定义了两个结构体 typedef struct Cmd {uint8_t ua;uint8_t ub;uint8_t uc;uint32_t ue; } Cmd_t;typedef struct Cmd_tag {uint8_t value;uint8_t data[1]; // 将 data 定义为指向 Cmd_t 结构体的指针 } tag_t;在实际使用中&#xff0c;看见前人的代码是&#xff0c;new 一块内…

MySQL第三次作业--DML语句(INSERT)

目录 一、在数据库中创建一个表student&#xff0c;用于存储学生信息 二、向student表中添加一条新记录&#xff0c;记录中id字段的值为1&#xff0c;name字段的值为"monkey"&#xff0c;grade字段的值为98.5 三、向student表中添加多条新记录&#xff1a; 2,&qu…

详解动态规划之01背包问题及其空间压缩(图文并茂+例题讲解)

1. 动态规划问题的本质 记忆化地暴力搜索所有可能性来得到问题的解 我们常常会遇到一些问题&#xff0c;需要我们在n次操作&#xff0c;且每次操作有k种选择时&#xff0c;求出最终需要的最小或最大代价。处理类似的问题&#xff0c;我们一般需要遍历所有的可能性(相当于走一遍…

SpringMVC核心组件之HandlerMapping详解

文章目录 前言一、AbstractHandlerMapping抽象类initApplicationContextgetHandler 二、MatchableHandlerMapping类二、AbstractUrlHandlerMapping类 前言 当一个web请求到来时&#xff0c;DispatcherServlet负责接收请求并响应结果。DispatcherServlet首先需要找到当前请求对…

普通人也能创业!轻资产短视频带货项目,引领普通人实现创业梦想

在这个信息爆炸的时代&#xff0c;创业似乎成为了越来越多人的梦想。然而&#xff0c;传统的创业模式 keJ0277 往往伴随着高昂的资金投入和复杂的管理流程&#xff0c;让许多普通人望而却步。然而&#xff0c;现在有一种轻资产短视频带货项目正在悄然兴起&#xff0c;它以其低…

2024做安全测试必须要知道的几种方法!

前言 安全性测试(Security Testing)是指有关验证应用程序的安全等级和识别潜在安全性缺陷的过程&#xff0c;其主要目的是查找软件自身程序设计中存在的安全隐患&#xff0c;并检查应用程序对非法侵入的防范能力&#xff0c;安全指标不同&#xff0c;测试策略也不同。 但安全…

『Apisix安全篇』快速掌握APISIX Basic-Auth插件高效使用

&#x1f4e3;读完这篇文章里你能收获到 &#x1f468;‍&#x1f4bb; 学习如何快速安装并配置APISIX Basic-Auth插件&#xff0c;为您的API安全保驾护航。&#x1f6e0;️ 文章详细介绍了如何创建带有basic-auth配置的Consumer&#xff0c;以及如何在Route中启用该插件。&am…

微信自主创建表单投票小程序源码系统 带充值刷礼物功能 附带源代码以及完整的安装部署教程

系统概述 本小程序实现的核心功能包括&#xff1a;用户注册登录、表单提交投票、查看投票结果、在线充值以及赠送礼物等。其中&#xff0c;投票表单可以根据实际需求进行自定义设置&#xff0c;满足不同类型的调查或评选活动。同时&#xff0c;通过引入第三方支付接口&#xf…

Django Celery 的配置及使用---最详细教程

Django Celery 的配置及使用 Redis提供队列消息功能 一、安装redis 系统版本&#xff1a;Ubuntu 20.041、获取最新软件包 sudo apt update sudo apt install redis-server2、安装完成后&#xff0c;Redis服务器会自动启动。查看redis是否启动成功 sudo systemctl status …

LLM大模型多模态面试题(二)

1. 介绍transformer算法 Transformer本身是一个典型的encoder-decoder模型&#xff0c;Encoder端和Decoder端均有6个Block&#xff0c;Encoder端的Block包括两个模块&#xff0c;多头self-attention模块以及一个前馈神经网络模块&#xff1b;Decoder端的Block包括三个模块&…

uniapp 实现下拉刷新 下滑更新

效果图 在app或者小程序中向下滑动 会出现刷新数据 ,而上拉到底 需要更新数据 功能实现 主要俩种方式 依赖生命周期 在page.json中开启 page.json "style" : {"navigationBarTitleText" : "小小练习","backgroundTextStyle": &qu…

狙击策略专用术语以及含义,WeTrade3秒讲解

想必各位交易高手对狙击策略不会陌生吧!但你想必不知道狙击策略的开发者为了推广狙击策略&#xff0c;在狙击策略基础的经典技术分析理论引入了自己的术语。今天WeTrade众汇和各位投资者继续了解狙击策略专用术语以及含义。 一.BL 银行级别(BL)是前一日线收盘的级别。时间是格…

微信小程序开发中怎么配置SSL证书?

在微信小程序开发中&#xff0c;配置SSL证书主要用于实现HTTPS请求&#xff0c;以保证数据传输的安全性。以下是配置SSL证书的基本步骤&#xff1a; 一、获取SSL证书 首先&#xff0c;你需要获取一个有效的SSL证书。SSL证书可以被广泛信任的证书颁发机构申请&#xff0c;如Jo…

rocketmq的顺序消息开发注意事项

1. 参考消息重试&#xff0c;要对 MaxReconsumeTimes进行设置。之前就是因为没有进行设置&#xff0c;导致了队头阻塞问题。 rokcetmq和kafka一样&#xff0c;当顺序消息写入的多个队列中后&#xff0c;如果是顺序消息&#xff0c;当前的队列的队头一直消费失败的时候&#x…

JVM运行时内存:本地方法接口与本地方法栈

文章目录 1. 什么是本地方法&#xff1f;2. 为什么要使用Native Method&#xff1f;3. 本地方法现状 运行时内存整体结构如下图所示: 1. 什么是本地方法&#xff1f; 简单地讲&#xff0c;一个Native Method就是一个Java调用非 Java 代码的接口。一个Native Method是这样一个 …

【Linux】linux | 配置系统日志 | 安全日志 | 操作日志 | 登录日志

一、诉求 1、linux服务器开启日志功能&#xff0c;并记录10个月的登录 二、操作 1、进入目录 cd /etc 2、编辑配置 vi logrotate.conf 3、复制配置 /var/log/wtmp {monthlycreate 0664 root utmpminsize 1Mrotate 10 }/var/log/btmp {missingokmonthlycreate 0600 root …

vue2人力资源项目9权限管理

页面搭建 <template><div class"container"><div class"app-container"><el-button size"mini" type"primary">添加权限</el-button><el-table-column label"名称" /><el-table-co…

Spring Boot代码案例(计算器、登录、留言板)

文章目录 一、计算器二、登录2.1 判断账号密码是否正确2.2 根据不同的用户作出不同反应 三、留言板3.1 提交数据3.2 展示所有数据 四、Lombok 工具包4.1 场景介绍4.2 如何使用 五、Edit Starters插件六、项目如何Debug七、项目命名规范 一、计算器 导入前端文件后端代码&#…

AI Agent是什么?未来如何发展

AI Agnt是什么 AI代理&#xff08;AI Agent&#xff09;是指一种利用人工智能技术来执行特定任务或解决特定问题的自主软件程序。这些代理通过学习和模拟人类行为或特定领域的知识&#xff0c;能够在无需人为干预的情况下完成复杂的任务。AI代理广泛应用于多个领域&#xff0c…