如何导出多Sheet的PDF

在SpreadJS的官方文档中，如果要导出一个Sheet的PDF，我们通常会使用savePDF这个接口。




为其sheetIndex传入指定Sheet的索引，即可导出对应的Sheet。

但是如果有的同学有导出多个Sheet的需求，应该如何实现呢？

就SpreadJS本身来说，并没有提供相关的接口，但是我们可以通过一些其他的包来实现。

在这里，我将简单介绍 pdf-lib 的使用方式，并使用它实现导出多个Sheet PDF的需求。

1、在使用pdf-lib前，先简单介绍一下引入方式。可以直接使用npm install pdf-lib来安装，也可以通过cdn去引入，为了方便同学们使用，下面是我用例中使用的cdn，供大家参考：

1. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js" integrity="sha512-z8IYLHO8bTgFqj+yrPyIJnzBDf7DDhWwiEsk4sY+Oe6J2M+WQequeGS7qioI5vT6rXgVRb4K1UVQC5ER7MKzKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

复制代码

2、引入完毕后，我们需要创建一个新的PDF对象，来作为空模板：

1. const mergedPdf = await PDFLib.PDFDocument.create();

复制代码

3、然后我们需要遍历传入的PDF Unit8Array对象，将其中的Page取出并存储在空模板上：

1. for (const pdfBytes of pdfs) {
   
2.   const pdf = await PDFLib.PDFDocument.load(pdfBytes);
   
3.   const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
   
4.   copiedPages.forEach((page) => mergedPdf.addPage(page));
   
5. }

复制代码

4、最后，将这个模板导出即可，pdf-lib提供了save接口将其导出为Unit8Array：

1. const mergedPdfFile = await mergedPdf.save();

复制代码

至此，合并的基础逻辑就已经实现了，封装一下即可得到：

1. async function mergePDFs(pdfs) {
   
2.   const mergedPdf = await PDFLib.PDFDocument.create();
   
3. 
   
4.   for (const pdfBytes of pdfs) {
   
5.     const pdf = await PDFLib.PDFDocument.load(pdfBytes);
   
6.     const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
   
7.     copiedPages.forEach((page) => mergedPdf.addPage(page));
   
8.   }
   
9. 
   
10.   const mergedPdfFile = await mergedPdf.save();
    
11.   return mergedPdfFile;
    
12. }

复制代码

然后再做一个循环，将需要导出的Sheet转为一个Unit8Array的数组传入mergePDFs这个函数的参数中。

1. let pdfUnit8Array = [];
   
2. for (let i = 0; i < 2; i++) {
   
3.   spread.savePDF(
   
4.     async function (blob) {
   
5.       blob.arrayBuffer().then((arrayBuffer) => {
   
6.         const uint8Array = new Uint8Array(arrayBuffer);
   
7.         console.log(uint8Array);
   
8. 
   
9.         pdfUnit8Array.push(uint8Array);
   
10.       });
    
11.     },
    
12.     function (e) {
    
13.       console.log(e);
    
14.     },
    
15.     {},
    
16.     i
    
17.   );
    
18. }

复制代码

最后，我们将导出封装为一个按钮：

1. document
   
2.   .querySelector("#button1")
   
3.   .addEventListener("click", async function () {
   
4.     const blob = new Blob([await mergePDFs(pdfUnit8Array)], {
   
5.       type: "application/octet-stream",
   
6.     });
   
7. 
   
8.     const downloadUrl = URL.createObjectURL(blob);
   
9. 
   
10.     const downloadLink = document.createElement("a");
    
11.     downloadLink.href = downloadUrl;
    
12.     downloadLink.download = "1.pdf";
    
13. 
    
14.     downloadLink.click();
    
15. 
    
16.     URL.revokeObjectURL(downloadUrl);
    
17.   });

复制代码

至此，大功告成，这一段示例代码可以将WorkBook中的第一个和第二个Sheet导出为PDF。

以上代码仅供参考，大家可以根据自己项目的实际需求来进行调整，如有疑问，欢迎前往 求助中心 发帖交流~