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

JS合并2个远程pdf

要在HTML和JavaScript中读取远程PDF文件的矢量数据并合并两个PDF文件,您可以使用pdf-lib和Axios库。以下是使用pdf-lib和Axios在HTML和JavaScript中读取和合并远程PDF文件的步骤:

1. 引入

首先,确保您在HTML文件中引入了pdf-lib和Axios库。您可以通过CDN链接或本地文件引入它们。例如:

<script src="https://cdn.jsdelivr.net/npm/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>

或者,您可以将pdf-lib和Axios库下载到本地,然后在HTML中引入它们的本地文件。

2. 添加按钮

在HTML文件中添加一个按钮,用于触发读取和合并PDF文件的操作。例如:

<button onclick="mergePDFs()">合并PDF文件</button>

3. 添加JS

在JavaScript文件中添加以下代码来实现读取和合并PDF文件的功能:

// 合并PDF文件
async function mergePDFs() {const pdfUrl1 = 'https://example.com/path/to/first/pdf/file.pdf';const pdfUrl2 = 'https://example.com/path/to/second/pdf/file.pdf';try {// 读取第一个PDF文件const pdfBytes1 = await axios.get(pdfUrl1, { responseType: 'arraybuffer' });const pdfDoc1 = await PDFLib.PDFDocument.load(pdfBytes1.data);// 读取第二个PDF文件const pdfBytes2 = await axios.get(pdfUrl2, { responseType: 'arraybuffer' });const pdfDoc2 = await PDFLib.PDFDocument.load(pdfBytes2.data);// 创建一个新的PDF文档const mergedPdfDoc = await PDFLib.PDFDocument.create();// 合并两个PDF文档的页面const [existingPage] = await mergedPdfDoc.copyPages(pdfDoc1, [0])mergedPdfDoc.addPage(existingPage)const [existing2Page] = await mergedPdfDoc.copyPages(pdfDoc2, [0])mergedPdfDoc.addPage(existing2Page)// 将合并后的PDF文档保存为字节数组const mergedPdfBytes = await mergedPdfDoc.save();// 可根据需要进行后续操作,例如下载合并后的PDF文件或读取矢量数据// ...console.log('PDF文件合并成功!');} catch (error) {console.error('无法合并PDF文件:', error);}
}

4.预览

添加html

<iframe id="pdf" style="width: 100%; height: 100%;"></iframe>

添加js

    const pdfDataUri = await mergedPdfDoc.saveAsBase64({dataUri: true});document.getElementById('pdf').src = pdfDataUri;

5.下载

简单的下载逻辑

        var downloadLink = document.createElement('a');downloadLink.href = URL.createObjectURL(new Blob([mergedPdfBytes]));downloadLink.download = 'merged_pdf.pdf';document.body.appendChild(downloadLink);downloadLink.click();document.body.removeChild(downloadLink);

上述代码使用pdf-lib库来读取和合并两个远程PDF文件。它使用Axios库来获取远程PDF文件的字节数据,并将其加载到PDFDocument对象中。然后,它遍历每个PDF文件的页面,并将它们添加到合并后的PDF文档中。最后,它将合并后的PDF文档保存为字节数组。

您可以根据需要在mergePDFs函数中添加适当的代码来执行后续操作,例如将合并后的PDF文件下载到本地或读取矢量数据。

请注意,由于安全原因,浏览器可能会阻止从不同域的远程PDF文件加载数据。如果遇到这种情况,请确保您在服务器上设置了适当的CORS(跨域资源共享)配置。

PDF-LIB库包含的功能
创建和修改
从头开始创建PDF文档,或修改现有的PDF文档。绘制文本、图像和矢量图形。嵌入您自己的字体。甚至从其他PDF中嵌入和绘制页面。

纯JavaScript
用TypeScript编写,并编译为纯JavaScript,没有本地依赖项。适用于任何JavaScript运行时,包括浏览器、Node、Deno,甚至React Native。

拆分和合并
添加、插入和删除页面。将单个PDF拆分为单独的PDF。或者将多个PDF合并到一个文档中。

填写表格
创建新表单或填写并读取现有字段。复选框、按钮、单选组、下拉列表、选项列表和文本字段都受支持。

相关文章:

JS合并2个远程pdf

要在HTML和JavaScript中读取远程PDF文件的矢量数据并合并两个PDF文件&#xff0c;您可以使用pdf-lib和Axios库。以下是使用pdf-lib和Axios在HTML和JavaScript中读取和合并远程PDF文件的步骤&#xff1a; 1. 引入 首先&#xff0c;确保您在HTML文件中引入了pdf-lib和Axios库。…...

TikTok的伦理挑战:虚拟世界与现实世界的交汇

在数字时代&#xff0c;社交媒体平台已经不再只是一个信息传播的工具&#xff0c;它已经深刻地改变了我们的社交行为、价值观和伦理观。 而在这一领域的佼佼者之一&#xff0c;TikTok&#xff0c;正面临着伦理挑战&#xff0c;这是虚拟世界与现实世界交汇的产物。 本文将深入…...

C# 获取磁盘空间大小的方法

方法一&#xff1a;利用System.IO.DriveInfo.GetDrives方法来获取 /// 获取指定驱动器的空间总大小(单位为B)////// 只需输入代表驱动器的字母即可 &#xff08;大写&#xff09;///public static long GetHardDiskSpace(string str_HardDiskName){long totalSize new long();…...

JVM机制理解与调优方案

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有需要我的支持&#xff0c;请私信或评论留言&#xff01; 前言 很多Java开发…...

Django的设计模式及模板层

Django的设计模式及模板层 设计模式MVC和MVT MVC 代表 Model-View-Controller(模型-视图-控制器)模式。 M 模型层(Model),主要用于对数据库层的封装 V 视图层(View),用于向用户展示结果 (WHAT HOW) C 控制(Controller&#xff0c;用于处理请求、获取数据、返回结果(重要) 作…...

写代码生成流程图

我们在写文档&#xff0c;博客的时候&#xff0c;一般都会使用markdown语法&#xff0c;最常见的就是一些github开源项目的README。有时候会去画一些流程图&#xff0c;例如使用process.on或者xmind等第三方网站&#xff0c;然后截图插入到文档中。 今天我们介绍一种使用代码直…...

python reportlab生成pdf

这里自定义了pagetemplate&#xff0c;使用BaseDocTemplate&#xff0c;但我感觉一般使用SimpleDocTemplate就可以。 from reportlab.platypus import Frame from reportlab.lib.pagesizes import A4, landscapepadding dict(leftPadding72,rightPadding72,topPadding72,bott…...

第一次作业题解

第一次作业题解 P5717 【深基3.习8】三角形分类 思路 考的是if()的使用,还要给三条边判断大小 判断优先级&#xff1a; 三角形&#xff1f;直角、钝角、锐角等腰等边 判断按题给顺序来 代码 #include <stdio.h> int main() {int a 0, b 0, c 0, x 0, y 0, z 0…...

美篇作文网教学资源源码-自带作文数据

非常漂亮的UI设计和页面排版&#xff01; 自适应手机pc端 页面内容均支持自定义 可以用来做网站矩阵&#xff0c;或者增强你其他网站板块&#xff0c;或者单独运营都可以。 可以通过广告方式变现&#xff0c;或者引流等等 友好的seo&#xff0c;更容易被浏览器收录 关注青狐…...

电脑软件:Duplicate Cleaner Pro 5.16 重复文件清理软件(附下载)

大家平时在使用电脑的时候&#xff0c;会经常从网上下载文件或者从其他电脑拷贝文件到自己的电脑上。久而久之就会在电脑中存放很多相同的文件&#xff0c;并且会越积越多&#xff0c;不仅占用很多磁盘空间&#xff0c;在文件管理上也非常混乱不方便。如何解决呢&#xff1f; …...

支持笔记本电脑直插直充,TOWE 65W智能快充PDU超级插座

电源插排在我们的生活中是必不可少的电器配件。今天&#xff0c;我们日常生活中所使用的电子设备越来越多&#xff0c;无论是手机、平板、笔记本电脑还是各种家用电器&#xff0c;都需要电源来驱动。虽然相对于其他电器来说&#xff0c;插排结构比较简单&#xff0c;但现代家庭…...

部署Kafka

kafka&#xff1a;kafka_2.13-3.5.1 NOTE: Your local environment must have Java 8 installed. Apache Kafka can be started using ZooKeeper or KRaft. To get started with either configuration follow one the sections below but not both. 1 Windows单机 1.1 Kafka w…...

Open3D 进阶(11)使用GMM-Tree算法对点云配准

GMM-Tree算法 一、算法原理1、主要函数2、参考文献二、代码实现三、结果展示1、点云初始位置2、配准后的位置四、测试数据本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、...

算法刷题注意事项

目录 1、使用nextInt后再使用nextLine的注意事项2、判断x是否是素数3、注意字符串和数字的排序4、Arrays.asList不可修改元素 1、使用nextInt后再使用nextLine的注意事项 使用nextInt再使用nextLine会有问题&#xff0c;输入的回车会被nextLine给接受&#xff0c;可以将nextLi…...

搭建自己的pypi服务器

要搭建自己的 PyPI 服务器&#xff0c;您可以使用 warehouse 项目&#xff0c;它是 PyPI 的开源实现。下面是一些基本步骤&#xff1a; 准备环境&#xff1a; 安装 Python安装 PostgreSQL 数据库 克隆 warehouse 项目&#xff1a; git clone https://github.com/pypa/wareh…...

ndoe.js、npm相关笔记

1、npm 全局安装 npm config get prefix 获取 npm 全局安装路径如果全局插件不能正常使用&#xff0c;看环境变量是否已经配置。没有配置则把全局安装路径配置到环境变量的path中...

如何使用ArcGIS Pro制作标准地图样式国界

相信大家都浏览过标准地图服务提供的标准地图&#xff0c;不知道你有没有想过尝试制作里面的国界&#xff0c;这里为大家介绍一下制作方法&#xff0c;希望能对你有所帮助。 制作已定国界 在地图数据内&#xff0c;国界分为已定国界、未定国界和海岸线&#xff0c;我们先对已定…...

基于数学模型水动力模拟、水质建模、复杂河网构建技术在环境影响评价、入河排污口论证及防洪评价中的应用

目录 专题一 一维水动力模型在河流水动力模拟中的应用 专题二 一维复杂河网模型构建及建筑物设置 专题三 一维水质模型在入河排污口和环境影响评价中的应用 专题四 平面二维水动力模型的构建和验证 专题五 平面二维水动力模型在防洪影响评价中的应用 专题六 平面二维水动…...

每天学习3个小时能不能考上浙大MBA项目?

不少考生经常会问到上岸浙大MBA项目想要复习多长时间&#xff0c;这个问题其实没有固定答案。在行业十余年的经验总结来看&#xff0c;杭州达立易考教育认为基于每一位考生的个人复习时间、个人学习能力以及原有基础情况等不同&#xff0c;复习上岸的预期分数目标也会有差异&am…...

NVM的下载安装和使用

node包管理工具NVM让我们更加方便在各个node版本之间切换来适配不同的项目 一、下载安装 下载地址&#xff1a;github下载地址 https://github.com/coreybutler/nvm-windows/releases安装一直点下一步就行&#xff0c;可以安装在D、E盘都行&#xff0c;安装后检查是否安装成功…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...