如何使用 Tabulator、jsPDF 和 PDF-Lib 下载 2 个表格到 1 个 PDF？

Question

我用 Tabulator 创建了两个表格，我想在用户单击下载按钮时将它们都下载到 1 个 PDF 文件。

我试过在这里组合解决方案： Tabulator 将多个表格组合成一个 pdf

这里有解决方案： 如何使用 jsPDF 合并两个 PDF 文件

downloadReady 已弃用，所以我使用 downloadEncoder 代替，根据此处的 Tabulator 文档：https://tabulator.info/docs/5.4/download#advanced-intercept

我上面提到的 Tabulator 解决方案说要放置 mergePDF 函数 就在创建 blob 之前。我这样做了，我用 jsPDF 的 doc.output('arraybuffer') 为 mergePdfs() 创建了输入 ArrayBuffer。

我试图在 downloadEncoder 中声明 arrayBuffer 后立即调用 mergePdfs(arrayBuffer[])，但是 arrayBuffer[] 需要括号内的参数，我不知道该放什么，或者我是否应该调用函数完全没有。

我没有包括整个表构造函数代码，只是与我要问的问题相关的部分。

表一

let table = new Tabulator("#table1",{
    downloadEncoder: function(fileContents, mimeType){
        const doc = new jsPDF('p', 'mm', 'a4')
        const arrayBuffer = doc.output('arraybuffer')
        
        async function mergePdfs(pdfsToMerge: ArrayBuffer[]): Promise<ArrayBufferLike> {
            const mergedPdf: PDFDocument = await PDFDocument.create();
          
            const createInnerPromise = async (arrayBuffer: ArrayBuffer): Promise<PDFPage[]> => {
              const pdf: PDFDocument = await PDFDocument.load(arrayBuffer);
              return await mergedPdf.copyPages(pdf, pdf.getPageIndices());
            };
          
            const outerPromise: Promise<PDFPage[]>[] = pdfsToMerge.map((arrayBuffer) => {
              const innerPromise: Promise<PDFPage[]> = createInnerPromise(arrayBuffer);
              return innerPromise;
            });
          
            const resultOuterPromise: PDFPage[][] = await Promise.all(outerPromise);
          
            resultOuterPromise.forEach((pageArray: PDFPage[]) => {
              pageArray.forEach((page: PDFPage) => {
                mergedPdf.addPage(page);
              });
            });
          
            return (await mergedPdf.save()).buffer;
          }

        return new Blob(["#table1"],{type:'application/pdf'});

    },

表 2

const subTable = new Tabulator("#table2",{
    downloadEncoder: function(fileContents:[string], mimeType: string){

        const doc = new jsPDF('p', 'mm', 'a4')
        const arrayBuffer = doc.output('arraybuffer')

        async function mergePdfs(pdfsToMerge: ArrayBuffer[]): Promise<ArrayBufferLike> {
            const mergedPdf: PDFDocument = await PDFDocument.create();
          
            const createInnerPromise = async (arrayBuffer: ArrayBuffer): Promise<PDFPage[]> => {
              const pdf: PDFDocument = await PDFDocument.load(arrayBuffer);
              return await mergedPdf.copyPages(pdf, pdf.getPageIndices());
            };
          
            const outerPromise: Promise<PDFPage[]>[] = pdfsToMerge.map((arrayBuffer) => {
              const innerPromise: Promise<PDFPage[]> = createInnerPromise(arrayBuffer);
              return innerPromise;
            });
          
            const resultOuterPromise: PDFPage[][] = await Promise.all(outerPromise);
          
            resultOuterPromise.forEach((pageArray: PDFPage[]) => {
              pageArray.forEach((page: PDFPage) => {
                mergedPdf.addPage(page);
              });
            });
          
            return (await mergedPdf.save()).buffer;
          }
      
        return new Blob(["#table2"],{type:'application/pdf'});
    },

我的代码中还有 Tabulator 的 PDF 下载功能。一旦 downloadEncoder 中的上述代码起作用，我就不需要这个了，对吗？上面的代码应该只是合并PDF并在执行

return new Blob(["#table2],{type:'application/pdf'})

时打开它？

    const pdf = document.querySelector('sl-menu-item[value="pdf"]');

    pdf.addEventListener('click', () => table.download("pdf", "data.pdf", {
        orientation:"landscape"
    }));