How can I insert external pdf to report?

Xushlin

My customer have a requirement that want insert many external PDF to jsreport.

the sample data like this:

    "Projects": [
      { "title":"Title 1",
        "pdfUrl": "https://projectportalstorageprod.blob.core.windows.net/pdf/Ebbepark%20Takavvattning%20test%20aaab_support@projektportalen.se_20241217101008.pdf"
      },
      { "title":"Title 2",
        "pdfUrl": "https://projectportalstorageprod.blob.core.windows.net/pdf/Ebbepark%20Takavvattning%20test%20aaab_support@projektportalen.se_20241217101008.pdf"
      }
    ]
}

and the template like this:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
  {{#each Projects}}
    <div style="color:black;">
      <h3>Title: {{this.title}}</h3>
    </div>
    <div>
     
      <p>Base64 content：</p>
      <p>{{#if this.pdfBase64}}{{this.pdfBase64}}{{else}}No Base64 Data Found{{/if}}</p>
    </div>  
      <div>
       
        {{#pdfMerge}}
          {{#merge}}
            {{pdfRaw this.pdfBase64}}
          {{/merge}}
        {{/pdfMerge}}
      </div>   
  {{/each}} 

</body>
</html>

js code:

const axios = require('axios');

async function beforeRender(req, res) {
  const projects = req.data.Projects;

  const pdfPromises = projects.map(async (project) => {
    try {
      console.log(`Downloading PDF for: ${project.title}, URL: ${project.pdfUrl}`);
      const response = await axios.get(project.pdfUrl, { responseType: 'arraybuffer' });

      console.log(`Status Code for ${project.title}:`, response.status);

      console.log(`Downloaded PDF Size for ${project.title}:`, response.data.length);

      const pdfBase64 = Buffer.from(response.data).toString('base64');

      console.log(`Generated Base64 Length for ${project.title}:`, pdfBase64.length);

      return {
        title: project.title +'Michael xu',
        pdfBase64: pdfBase64
      };
    } catch (error) {
      console.error(`Failed to download PDF for: ${project.title}, Error: ${error.message}`);
      return {
        title: project.title + 'ddd',
        pdfBase64: null
      };
    }
  });

  const pdfData = await Promise.all(pdfPromises);

  req.data.Projects = pdfData;
}

I get result:
0_1734581916584_upload-a6b36fbb-6349-4598-a5c8-80121f1634b2

the report can not render the base64 to PDF content.

How can I fix this case?

admin

I am not sure what your helpers pdfMerge and merge and pdfRaw do, but there is no way to embed another pdf directly from the html and templating engines. What you need to do is to invoke pdf utils from the afterRender script and use jsreport.pdfUtils.append to dynamically assemble multiple pdfs together.
https://jsreport.net/learn/pdf-utils#usage-in-script

Xushlin

@admin, thanks, I have look at the https://jsreport.net/learn/pdf-utils#usage-in-script, it will appended after source that mean it appended the external PDF to last, but I want insert the Pdf to report middle. have any other ways?

admin

There is an appendAfterPageNumber option to append in the middle.

append(sourcePdfBuf, appendedPdfBuf, options)
parameters:

- sourcePdfBuf -> pdf buffer to which to append the second param
- appendedPdfBuf -> pdf buffer appended after source
- options -> (optional)
options.appendAfterPageNumber -> the number of page from sourcePdfBuf which the pages from appendedPdfBuf should be inserted after

If you need to insert content in the middle of the page, you need to use the merge.

Xushlin

@admin , how to use merge insert one or many external pdf to document? have any example?