将 jsPDF 生成的两个 PDF 合并为一个文档

2024-02-12

我正在使用 jsPDF 从 HTML 生成文档(使用.html()方法)并且效果很好。但现在我需要做下一步:

  1. 创建 jsPDF 对象。
  2. 使用以下内容添加内容.html() method.
  3. 将新页面添加到创建的文档中。
  4. 使用相同的内容将内容添加到第二页.html() method.
  5. 保存创建的文档。

这是代码示例:

var doc = new jsPDF({ orientation: 'p', format: 'a4'  });
doc.html(document.getElementById('test'), {
   callback: function (doc) {
      doc.addPage('a4', 'p');
      doc.html(document.getElementById('test'), {
         callback: function (doc) {
            doc.output('dataurlnewwindow');
      }
   }
}

问题是第二页总是空白。这个想法是使用创建两个单独的文档.html()方法,然后将这两个文档合并为一个并保存。

所以问题是 - jsPDF 是否可以将两个文档合并为一个并保存?

提前致谢!


我可以使用以下命令成功地将多个 jsPDF 对象合并到一个 pdf 文件中:

// .ts
 private async generatePdfList(type: string, page = 1) {
    console.log('STEP 1:', new Date());
    const elements = document.querySelectorAll('.staff-list-receipt');
    const elementArray = Array.from(elements);
    const bufferPromises: Promise<any>[] = elementArray
      .filter(element => !!element)
      .map(element => this.elementToPdfBuffer(type, element, page));
    const pdfArrayBuffers = await Promise.all(bufferPromises);
    console.log('STEP 2:', new Date());
    const mergedPdf = await this.mergePdfs(pdfArrayBuffers);
    const pdfUrl = URL.createObjectURL(
      new Blob([mergedPdf], { type: 'application/pdf' }),
    );
  }

  async elementToPdfBuffer(type, element, page) {
    // option 1:
    // const pdf: jsPDF = html2pdf().from(element).toPdf().get("pdf");
    // option 2:
    new jsPDF().fromHTML(element);
    const pdfBuffer = await pdf.output("arraybuffer");
    return pdfBuffer;
  }

  async mergePdfs(pdfsToMerges: ArrayBuffer[]) {
    const mergedPdf = await PDFDocument.create();
    const actions = pdfsToMerges.map(async pdfBuffer => {
      const pdf = await PDFDocument.load(pdfBuffer);
      const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
      copiedPages.forEach((page) => {
        // console.log('page', page.getWidth(), page.getHeight());
        page.setWidth(210);
        mergedPdf.addPage(page);
      });
    });
    await Promise.all(actions);
    const mergedPdfFile = await mergedPdf.save();
    return mergedPdfFile;
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 jsPDF 生成的两个 PDF 合并为一个文档 的相关文章

随机推荐

  • UserPrincipal.FindByIdentity (System.DirectoryServices.AccountManagement) 中的 .NET 4.5 错误

    在 NET 4 5 下测试 NET 4 0 应用程序时 我们遇到了一个问题FindByIdentity方法用于UserPrincipal 以下代码在 NET 4 0 运行时中运行时有效 但在 NET 4 5 中运行时失败 Test publ
  • 如何处理多个代表

    我的应用程序中有一个几乎可以完成所有操作的视图 我喜欢这样 然而问题是它实现了 5 或 6 个不同的委托 这看起来有点混乱 我的问题是 视图控制器是否必须实现所有委托 或者有什么方法可以将代码分离到不同的文件中 无需进行重大重组或重写 这是
  • Service Worker skipWaiting 无法激活当前等待的软件

    描述 我们使用 sw precache 来预先缓存脚本 因此为了更新脚本 我们提供了重新加载选项 为此 我们正在监听工作人员消息 以跳过等待新安装的服务工作人员 原因未知 我们没有得到正确的结果 导入脚本 GETTING OLD SW re
  • 在 Powershell 中获取 ADFS 令牌

    我们有一个 ADFS 2 0 环境 用于将我们的 Active Directory 域与 Office 365 联合 最近 我们遇到了一个问题 集群停止响应 这反过来又破坏了所有用户的电子邮件 日历访问 由于我们目前没有对 ADFS 进行任
  • Odoo15 - ModuleNotFoundError:没有名为“PyPDF2”的模块

    我是 Odoo 的新手 我使用 pyenv 来托管 odoo 和所有依赖项 全部在 odoo 系统用户下 我能够启动 odoo 服务 systemctl status odoo 15 odoo 15 service Odoo15 Loade
  • 使用 PDO 的 mysql_num_rows 替代方案

    现在我有一个 PHP 文件 它执行 MYSQL 查询 然后计算行数 如下所示 count mysql num rows result if count 1 message array status gt ok else message ar
  • 列表理解:为每个项目返回两个(或更多)项目[重复]

    这个问题在这里已经有答案了 是否可以为列表理解中的每个项目返回 2 个 或更多 项目 我想要什么 示例 f x g x for x in range n 应该返回 f 0 g 0 f 1 g 1 f n 1 g n 1 因此 可以用一些东西
  • C++中的私有拷贝构造函数有什么用

    人们为什么要定义私有复制构造函数 什么时候将复制构造函数和赋值运算符设为私有是一个好的设计 如果类中没有作为唯一对象 如文件名 的指针或句柄的成员 那么在其他情况下 私有复制构造函数是个好主意吗 同样的问题也适用于赋值运算符 鉴于大多数 C
  • 按 Enter 键时 AngularJS 表单未提交

    我试图在用户按 Enter 键时提交登录表单 单击 登录 按钮时 该表单工作得很好 但按 Enter 不起作用 而且会导致奇怪的行为 关联的函数ng submit没有被执行 按 Enter 后不再显示错误消息 登录失败 这是我的标记
  • Bluecloth v2.0.10 在 Windows 7 中无法正常工作

    对于 Ruby 187 我从以下位置下载了 devkit http rubyinstaller org downloads http rubyinstaller org downloads并按照说明进行操作https github com
  • 如何更改 FireMonkey 中的编辑控件背景颜色?

    我只是找不到更改移动 FireMonkey 应用程序中编辑控件背景颜色的方法 我不知道移动版 FMX 但在 Mac Win 版 FMX 中 您应该执行以下步骤 右键单击 TEdit 并选择编辑自定义样式 在 结构 窗口中 展开编辑样式 T布
  • 如何使用函数初始化数组? [复制]

    这个问题在这里已经有答案了 我想在 Rust 中创建一个包含 10 个空向量的数组 但是 Vec new 10 不起作用Vec不执行Copy 我该如何做到这一点 更一般地说 如何通过重复调用函数来初始化数组 从 Rust 1 63 开始 U
  • 使用反射复制构造函数[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有一个包含 100 个字段的基类和一个包含 2 个字段的派生类 我希望通过调用基类中的 getter
  • 从商店下载全新版本后,Expo 中的 OTA 更新是否会在首次打开时启动?

    我使用 React Native 开发了一个应用程序 并通过 Expo 分发了它 我将最终版本发布到 Google Play 和 Apple Store 一段时间后我发现世博会的出版文档 https docs expo io version
  • 将cypress测试框架添加到Maven pom.xml

    尝试在 Maven 项目中使用新的 cypress 框架 文档只有一个 npm 模块设置示例 npm install cypress 和一个 package json 使用示例 如何将其转换为 Maven 依赖项中的用法 您也可以直接下载C
  • Xcode“来自调试器的消息:对 k 数据包收到意外响应:正常”

    在模拟器上测试我的应用程序时收到此消息 来自调试器的消息 对 k 数据包收到意外响应 正常 这是什么意思 我的应用程序是否存在任何危险 使用 Xcode 6 4 和 7 2 如果你看一下文件进程GDBRemote cpp http llvm
  • 使用 BitmapSource 的 WPF 渲染性能

    我创建了一个 WPF 控件 继承自 FrameworkElement 它显示可以平移的平铺图形 每个图块为 256x256 像素 24bpp 我已经重写了 OnRender 在那里 我加载所有新图块 如 BitmapFrame 然后使用 D
  • 异步函数执行?

    在我的 iOS 应用程序中 我执行以下操作 viewDidAppear Load a spinner in a view on the top DSBezelActivityView newActivityViewForView self
  • ASP.NET 和 C# 重定向

    我正在为学校做一个项目 这是一个额外的学分部分 我有一个使用母版页在 VS 2010 中启动的项目 我想做的是获得一个 提交 按钮 将人们重定向到 MyAccounts aspx 页面 我当前的按钮 ASP 部分代码如下所示
  • 将 jsPDF 生成的两个 PDF 合并为一个文档

    我正在使用 jsPDF 从 HTML 生成文档 使用 html 方法 并且效果很好 但现在我需要做下一步 创建 jsPDF 对象 使用以下内容添加内容 html method 将新页面添加到创建的文档中 使用相同的内容将内容添加到第二页 h