What is causing this page to remain empty?

Question

What is causing this page to remain empty?

Currently, I am working on developing an spfx web part that has the functionality to merge selected documents into one. By utilizing the pdf-lib and @pnp/sp libraries, I have been able to work on the following code:

const mergedFile = await PDFDocument.create();

// Iterating through each selected item
this.context.listView.selectedRows.forEach(async (row: RowAccessor) => {
   // Accessing 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);

For creating this web part, I referred to this link and this link. However, upon testing the functionality, I noticed that the resulting document only contains a blank page. Can anyone help me understand what might be causing this issue?

typescript spfx-extension

Answer 1

Answer №1

After some persistence, I finally discovered that the issue wasn't with 'typecasting' to blob as initially thought. It turns out that the for loop was running asynchronously from the rest of the function, causing a timing problem. This led to mergedFile.save() executing before the for loop could properly copy the pages to the PDFDocument. Sharing this solution in case it may prove useful to others.

const savedMergedFile = await this.generateByteArray();
const fileAsBlob = new Blob([savedMergedFile])
const newFile = await sp.web.getFolderByServerRelativePath(path).files.addChunked(encodeURI(fileName), fileAsBlob, undefined, true)

private async generateByteArray(): Promise<Uint8Array> {
    const mergedFile = await PDFDocument.create();

    for(const row of this.context.listView.selectedRows){
      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);
      });
    }
    return mergedFile.save();
}

Answer 2

After some persistence, I finally discovered that the issue wasn't with 'typecasting' to blob as initially thought. It turns out that the for loop was running asynchronously from the rest of the function, causing a timing problem. This led to mergedFile.save() executing before the for loop could properly copy the pages to the PDFDocument. Sharing this solution in case it may prove useful to others.

const savedMergedFile = await this.generateByteArray();
const fileAsBlob = new Blob([savedMergedFile])
const newFile = await sp.web.getFolderByServerRelativePath(path).files.addChunked(encodeURI(fileName), fileAsBlob, undefined, true)

private async generateByteArray(): Promise<Uint8Array> {
    const mergedFile = await PDFDocument.create();

    for(const row of this.context.listView.selectedRows){
      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);
      });
    }
    return mergedFile.save();
}

What is causing this page to remain empty?

Answer №1

Similar questions

Error encountered in Typescript: SyntaxError due to an unexpected token 'export' appearing

Transferring information through parent-child components via onChange

Guide to leveraging clsx within nested components in React

Exploring the ideal workspace for maximizing the potential of Ionic framework development

The declaration module in Typescript with and without a body

Rollup faces challenges when trying to bundle source code alongside Bazel and Typescript

Leveraging the 'styled()' utility from the MUI System while incorporating extra properties (Typescript)

Why does the page not work when I enter a certain URL with an ID parameter, and instead displays the error message "Uncaught ReferenceError: System is not defined"?

What are the steps to transpile NextJS to es5?

Is it possible to import both type and value on the same line when isolatedModules=true?

How do I add a new module to an existing one using Angular-CLI?

Creating a JSON file from a custom key-value class in Typescript: A comprehensive guide

Enforce Immutable Return in TypeScript

Updating the dropdown option value in Angular 10's edit component

How can we avoid excessive re-rendering of a child component in React when making changes to the parent's state?

Learn how to customize the background colors of the x and y axes in Highcharts graphs

Encountering an "Invalid hook call error" while utilizing my custom library with styled-components

The AngularJS 2 TypeScript application has been permanently relocated

A guide to efficiently utilizing conditional dynamic import within a React application

There appears to be an issue with Axios incorrectly parsing TypeScript objects