CODEWITHSUNDEEP
javascriptreactjspdfhandlebars.jspuppeteer
Andymanic
Andymanic

Reputation: 51

PDF returned from js api empty

I'm using handlebars & puppeteer to generate a PDF report on my express api/server side. Using insomnia to trigger the API, it returns a complete PDF, exactly as I expect. When I have client side React app download it, it saves the correct number of pages, but empty. I've tried a number of ways of downloading the file, headers on API side. Here's the current code.

front end:

const res = await getDashboard(company, category, country, endDate, startDate);
const blob = new Blob([res], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'amazon.pdf';
a.click();

Server side:

const pdf = await genReport(data);
res.contentType('application/pdf');
res.header('Pragma', 'public');
res.header('Cache-Control', 'max-age=0');
res.setHeader('Content-disposition', 'attachment;filename=AmazonReport.pdf');
res.type('application/pdf');
res.send(pdf);

I'm not sure where I've gone wrong. Since insomnia receives the PDF fine, I assume its client side handling. Please help.

Upvotes: 1

Views: 913

Answers (1)

Andymanic
Andymanic

Reputation: 51

@georgedum has pointed me in the right direction here, problem is now solved. Here's the updated/fixed code: Client side:

const res = await getDashboard(company, category, country, endDate, startDate);
const binaryString = window.atob(res);
const binaryLen = binaryString.length;
const bytes = new Uint8Array(binaryLen);
for (let i = 0; i < binaryLen; i++)
{
    const ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
}
const blob = new Blob([bytes], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'amazon.pdf';
a.click();

Server side:

const pdf = await genReport(data);
const encodedPdf = Buffer.from(pdf).toString('base64');
res.contentType('application/pdf');
res.header('Pragma', 'public');
res.header('Cache-Control', 'max-age=0');
res.setHeader('Content-disposition', 'attachment;filename=AmazonReport.pdf');
res.type('application/pdf');
res.send(encodedPdf);

Upvotes: 2

Related Questions