基于pdf.js实现对pdf预览、批注功能、 保存下载pdf,适配H5,平板 踩坑记录

项目场景:

在APP端实现对pdf的批注,能够下载保存.能够获取批注信息同时能够重新渲染到pdf中.基于pdf.js-4.5.136版本源码实现。pc端能够正常预览下载pdf,构建打包后嵌入uniapp的webview遇到的问题记录


问题描述

将构建打包后的代码嵌入到uniapp中,运行出现Uncaught TypeError: Promise.withResolvers is not a function

10:30:27.935 同步手机端程序文件完成
10:30:29.098 正在启动HBuilder调试基座...
10:30:30.103 应用【移动端测试】已启动
10:30:30.294 [Object] {"errMsg":"reLaunch:fail page `/` is not found"}  at permission.js:37
10:30:30.807 Uncaught TypeError: Promise.withResolvers is not a function at hybrid/html/web/viewer.mjs:24062
 

解决方案:

源码构建打包用的gulp generic出现上述问题,采用gulp generic-legacy(兼容低版本浏览器)构建方式即可

问题描述

app.js:1173加载 PDF 时发生错误。 PDF.js v? (build: ?) Message: file origin does not match viewer's

app.js:1173 加载 PDF 时发生错误。PDF.js v? (build: ?)
Message: file origin does not match viewer's

 

解决方案:

将pdf.js中app.js的跨域拦截去掉重新构建, 或者直接修改构建后的viewer.js的validateFileURL方法

var validateFileURL = function (file) {if (!file) {return;}try {const viewerOrigin = new URL(window.location.href).origin || "null";if (HOSTED_VIEWER_ORIGINS.includes(viewerOrigin)) {// Hosted or local viewer, allow for any file locationsreturn;}const fileOrigin = new URL(file, window.location.href).origin;// Removing of the following line will not guarantee that the viewer will// start accepting URLs from foreign origin -- CORS headers on the remote// server must be properly configured.//去掉下面这段==========================/*if (fileOrigin !== viewerOrigin) {throw new Error("file origin does not match viewer's");}*/} catch (ex) {PDFViewerApplication._documentError("pdfjs-loading-error", {message: ex.message,});throw ex;}};

 APP端下载pdf,需要更改下载方法,将pc端的下载方式改为移动端下载。通过uniapp的webview之间的通信,将文件流转成base64传到uniapp端处理下载保存到本地,更改viewer.j的下载方法

function download(blobUrl, filename) {//通过bloburl获取到blob对象再转成base64,传输到父页面uniapp端fetch(blobUrl).then(response => response.blob()).then(blob => {const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = () => {const base64 = reader.result;uni.postMessage({data: {blob: base64},});} })//下面是pc端的下载方式,注释掉//const a = document.createElement("a");//if (!a.click) {//  throw new Error('DownloadManager: "a.click()" is not supported.');//}//a.href = blobUrl;//a.target = "_parent";//if ("download" in a) {//  a.download = filename;//}//(document.body || document.documentElement).append(a);//a.click();//a.remove();
}

问题描述

在APP端下载,下载后的文件不含批注,只是源文件下载

 

解决方案:

通过跟踪源码,发现app端下载和pc端不同,

显然再APP保存文档的时候,出现异常,通过跟踪发现,批注存储序列化的时候出现分歧

get serializable() {if (this.#storage.size === 0) {return SerializableEmpty;}const map = new Map(),hash = new MurmurHash3_64(),transfer = [];const context = Object.create(null);let hasBitmap = false;for (const [key, val] of this.#storage) {//const serialized = val instanceof AnnotationEditor ? val.serialize(false, context) : val;//此处针对批注的value,强制序列化即可const serialized = val.serialize(false, context);if (serialized) {map.set(key, serialized);hash.update(`${key}:${JSON.stringify(serialized)}`);hasBitmap ||= !!serialized.bitmap;}}if (hasBitmap) {for (const value of map.values()) {if (value.bitmap) {transfer.push(value.bitmap);}}}return map.size > 0 ? {map,hash: hash.hexdigest(),transfer} : SerializableEmpty;}

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

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

相关文章

ELK-03-skywalking监控linux系统

文章目录 前言一、下载node_exporter二、启动node_exporter三、下载OpenTelemetry Collector四、启动OpenTelemetry Collector4.1 将配置文件下载到同级目录4.2 启动 五、查看总结 前言 skywalking安装完成后,开始我们的第一个监控-监控linux系统。 参考官方文档&a…

长列表加载性能优化

一、长列表优化概述 列表是应用开发中最常见的一类开发场景,它可以将杂乱的信息整理成有规律、易于理解和操作的形式,便于用户查找和获取所需要的信息。应用程序中常见的列表场景有新闻列表、购物车列表、各类排行榜等。随着信息数据的累积,特…

DMA的原理

一、介绍 DMA(Direct Memory Access)是一种允许设备直接与内存进行数据交换的技术,无需‌CPU干预。DMA的主要功能是提供在‌外设和存储器之间或者存储器和存储器之间的高速数据传输。比如使用ADC进行数据采集,可以直接将数据存入…

干货 | 2024制造业数字化现状调查白皮书(免费下载)

导读:在这本白皮书中,我们询问了制造商有关数字化转型的工作情况、2024 年的优先事项和可持续性。研究结果清楚地表明,在数字化方面处于领先地位的制造商转型项目比那些没有规划或刚刚起步的项目实现的价值要大得多。 加入知识星球或关注下方…

运维转型大模型:全面指南与实战总结

运维心里苦谁做谁知道,有时候感觉自己像一个杂工,在公司都快变成一个修电脑的了,不装了我转行了,给大家分享一点经验,希望能帮助到你们。 运维工程师转行至大模型领域需要学习一系列新的技能和知识。以下是一个详细的…

【算法】JAVA刷算法必备数据结构

文章目录 数组List队列和栈栈的应用:表达式求值 数组List ArrayList 类是一个可以动态修改的数组,与普通数组的区别就是它是没有固定大小的限制,我们可以添加或删除元素。 ArrayList 继承了 AbstractList ,并实现了 List 接口。 …

Nest.js实现一个简单的聊天室

本文将介绍如何使用 Nest.js 和 Uni-app 实现一个简单的实时聊天应用。后端使用 nestjs/websockets 和 socket.io,前端使用 uni-app 并集成 socket.io-client。这个项目允许多个用户同时加入聊天并实时交换消息。 效果图: 一、准备工作 安装 Node.js 和…

DAF-Net:一种基于域自适应的双分支特征分解融合网络用于红外和可见光图像融合

论文 DAF-Net: A Dual-Branch Feature Decomposition Fusion Network with Domain Adaptive for Infrared and Visible Image Fusion 提出了一种新的红外和可见光图像融合方法。该方法旨在结合红外图像和可见光图像的互补信息,以提供更全面的场景理解。红外图像在低…

学习C++的第七天!

1.虚函数是在基类中用 virtual 关键字声明的函数,可以在派生类中被重写。纯虚函数是在虚函数的基础上,在基类中被初始化为 0 的函数,含有纯虚函数的类是抽象类,不能被实例化。 2.如果基类的析构函数不是虚函数,当通过…

现代cpp多线程与并发初探

个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 在现代c(c20)中,有了jthread和协程的概念,使得我们编写并发程序更加方便. 这里作简单学习. 前言知识 多线程编程 std::thread 用于创建一个执行的线程实例,所以它是一切并发编程的基础,使用时需要包含 <thread…

Android个性名片界面的设计——约束布局的应用

节选自《Android应用开发项目式教程》&#xff0c;机械工业出版社&#xff0c;2024年7月出版 做最简单的安卓入门教程&#xff0c;手把手视频、代码、答疑全配齐 【任务目标】 使用约束布局、TextView控件实现一个个性名片界面的设计&#xff0c;界面如图1所示。 图1 个性名片…

Transformer 算法模型详解

核心点&#xff1a;完整讲解Transformer模型&#xff01; 让我们用简单的语言来解释&#xff1a;想象一下&#xff0c;你正在阅读一本书&#xff0c;书中的每个字都很重要。但如果你每次只能关注一个字&#xff0c;理解整本书就会变得很慢。而Transformer模型就像是赋予你超能…

从密码学看盲拍合约:智能合约的隐私与安全新革命!

文章目录 前言一、什么是盲拍合约&#xff1f;二、盲拍合约的优势1.时间压力的缓解2.绑定与秘密的挑战 三、盲拍合约的工作原理1.提交盲出价2.披露出价3.结束拍卖4.退款机制 四、代码示例总结 前言 随着区块链技术的发展&#xff0c;智能合约在各种场景中的应用越来越广泛。盲…

基于Hive和Hadoop的病例分析系统

本项目是一个基于大数据技术的医疗病历分析系统&#xff0c;旨在为用户提供全面的病历信息和深入的医疗数据分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以 Spark…

Linux入门2——初识Linux权限

目录 0. Linux下的用户 1.文件访问者的分类 2.文件类型和访问权限 3. 文件权限值的表示方法 4.文件访问权限的相关设置方法 4.1 修改文件的访问权限 4.2修改文件的拥有者和所属组 0. Linux下的用户 在学习Linux权限之前&#xff0c;我们要先来了解Linux下的用户&#x…

vue+UEditor附件上传问题

&#x1f3c6;本文收录于《全栈Bug调优(实战版)》专栏&#xff0c;主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&am…

端口隔离配置的实验

端口隔离配置是一种网络安全技术&#xff0c;用于在网络设备中实现不同端口之间的流量隔离和控制。以下是对端口隔离配置的详细解析&#xff1a; 基本概念&#xff1a;端口隔离技术允许用户将不同的端口加入到隔离组中&#xff0c;从而实现这些端口之间的二层数据隔离。这种技…

算法记录——链表

2.链表 2.1判断是否是回文链表 1.方法一&#xff1a;利用栈反转链表 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode…

Invalid Executable The executable contains bitcode

Invalid Executable The executable contains bitcode 升级xcode16后&#xff0c;打包上传testflight时三方库报错&#xff1a;Invalid Executable - The executable ***.app/Frameworks/xxx.framework/xxx contains bitcode. 解决方案&#xff1a; 执行一下指令删除该framew…

软件测试学习路线图

软件测试工程师是专门从事软件、系统或产品测试和评估的技术专业人士&#xff0c;确保它们符合既定标准并无任何缺陷。通过精心设计和执行测试计划&#xff0c;软件测试工程师发现 Bug、故障和需要改进的领域&#xff0c;从而提高最终产品的可靠性和性能。 软件测试工程师在软…