将jsPDF生成的两个PDF合并到一个文档中 [英] Merge two PDF's generated with jsPDF into one document

问题描述

我正在使用jsPDF从HTML生成文档(使用.html()方法)，并且工作正常.但现在我需要下一步:

I'm using jsPDF for generation of document from HTML (with using .html() method) and it works fine. But now I need to do next:

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

1. Create jsPDF object.
2. Add content with using .html() method.
3. Add new page to created document.
4. Add content to second page with using the same .html() method.
5. Save created document.

这是代码示例:

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()方法创建两个单独的文档，然后将这两个文档合并为一个文档并保存.

Problem is the second page is always blank. The idea is to create two separate documents with using .html() method and then merge this two document into one and save it.

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

So question is - is it possible in jsPDF to merge two documents into one and save it then?

提前谢谢！

推荐答案

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

I can successfully merge multi jsPDF object to one pdf file with this:

// .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;
  }

这篇关于将jsPDF生成的两个PDF合并到一个文档中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！