如何导出多Sheet的PDF

收藏

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

image.png475724181.png

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

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

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

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

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

<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对象，来作为空模板：

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

复制代码

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

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

复制代码

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

const mergedPdfFile = await mergedPdf.save();

复制代码

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

async function mergePDFs(pdfs) {
const mergedPdf = await PDFLib.PDFDocument.create();
for (const pdfBytes of pdfs) {
const pdf = await PDFLib.PDFDocument.load(pdfBytes);
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach((page) => mergedPdf.addPage(page));
}
const mergedPdfFile = await mergedPdf.save();
return mergedPdfFile;
}

复制代码

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

let pdfUnit8Array = [];
for (let i = 0; i < 2; i++) {
spread.savePDF(
async function (blob) {
blob.arrayBuffer().then((arrayBuffer) => {
const uint8Array = new Uint8Array(arrayBuffer);
console.log(uint8Array);
pdfUnit8Array.push(uint8Array);
});
},
function (e) {
console.log(e);
},
{},
i
);
}

复制代码

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

document
.querySelector("#button1")
.addEventListener("click", async function () {
const blob = new Blob([await mergePDFs(pdfUnit8Array)], {
type: "application/octet-stream",
});
const downloadUrl = URL.createObjectURL(blob);
const downloadLink = document.createElement("a");
downloadLink.href = downloadUrl;
downloadLink.download = "1.pdf";
downloadLink.click();
URL.revokeObjectURL(downloadUrl);
});

复制代码

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

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

		自动登录	找回密码
密码			立即注册

如何导出多Sheet的PDF

0 个回复

SpreadJS 认证

SpreadJS 高级认证