SPFX Web Part合并PDF生成空白页，求排查原因

我正在开发一个SPFX Web Part，用于将选中的文档合并为一个文件，使用的是pdf-lib和@pnp/sp库。测试运行后，生成的文档仅为空白页，以下是我的代码：

const mergedFile = await PDFDocument.create();

// Loop through each selected item
this.context.listView.selectedRows.forEach(async (row: RowAccessor) => {
   // Get the file array buffer
   const file = sp.web.getFileByServerRelativePath(row.getValueByName('FileRef'));
   const fileBytes: ArrayBuffer = await file.getBuffer();
   const fileToMerge = await PDFDocument.load(fileBytes);

   const copyPages = await mergedFile.copyPages(fileToMerge, fileToMerge.getPageIndices());
   copyPages.forEach((page) => {
     mergedFile.addPage(page);
   });
});


const savedMergedFile = await Promise.resolve(mergedFile.save());
const newFileAsBlob = new Blob([savedMergedFile]);
const newFile = await sp.web.getFolderByServerRelativePath(path).files.addChunked(encodeURI("newFile.pdf"), newFileAsBlob,  undefined, true);

核心问题 #

forEach循环搭配async回调时，不会等待每个异步任务执行完成，代码会直接跳过循环执行后续的mergedFile.save()，此时mergedFile还未添加任何页面，最终生成空白PDF。

修复代码 #

const mergedFile = await PDFDocument.create();

// 用map生成Promise数组，通过Promise.all等待所有合并操作完成
await Promise.all(this.context.listView.selectedRows.map(async (row: RowAccessor) => {
   const file = sp.web.getFileByServerRelativePath(row.getValueByName('FileRef'));
   const fileBytes: ArrayBuffer = await file.getBuffer();
   const fileToMerge = await PDFDocument.load(fileBytes);

   const copyPages = await mergedFile.copyPages(fileToMerge, fileToMerge.getPageIndices());
   copyPages.forEach((page) => {
     mergedFile.addPage(page);
   });
}));

// 确认所有页面添加完成后再保存上传
const savedMergedFile = await mergedFile.save();
const newFileAsBlob = new Blob([savedMergedFile]);
const newFile = await sp.web.getFolderByServerRelativePath(path).files.addChunked(encodeURI("newFile.pdf"), newFileAsBlob, undefined, true);

额外建议 #

• 增加文件类型校验，确保选中的都是有效的PDF文件，避免PDFDocument.load()抛出错误
• 添加加载状态提示，防止用户在异步操作未完成时重复触发功能

内容的提问来源于stack exchange，提问作者whaleiam