Find the error: Puppeteer create PDF and send from Node JS backend to JS frontend
Budget: €8 – €30 EUR
I cannot get the PDF to have content, it is always empty. The first working solution wins.
NodeJS file:
exports.pdf = functions.region('europe-west3').https.onCall(async (data, context) => {
appCheck(context)
return createTicket(data)
});
async function createTicket(data){
const puppeteer = require('puppeteer')
const handlebars = require("handlebars")
const fs = require("fs")
require("intl")
const path = require("path")
var browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] })
var templateHtml = await fs.readFileSync(path.join(process.cwd(), 'ticket.html'), 'utf8')
console.log(templateHtml);
var template = handlebars.compile(templateHtml)
console.log(template);
var html = template()
console.log(html)
html = `<body>
<h1>An example static HTML to PDF</h1>
</body>`
try {
const page = await browser.newPage()
await page.setContent(html)
const buffer = await page.pdf({
format: 'A4',
printBackground: true,
margin: {
left: '0px',
top: '0px',
right: '0px',
bottom: '0px'
}
});
await browser.close()
var bufferArray = await buffer.toString()
return bufferArray
} catch (err) {
await browser.close()
return({
err
})
}
}
JS File:
async getPDF(){
var pdf = firebase.app().functions('europe-west3').httpsCallable('pdf');
pdf({Name: 'Test',Name2: 'Test2'}).then(async (result:any) => {
console.log(result.data);
//var sampleArr = base64ToArrayBuffer(result.data);
saveByteArray("Sample Report", result.data);
}).catch((error) => {
console.log(error);
return 0;
});
function saveByteArray(reportName, byte) {
console.log(byte);
var blob = new Blob([byte], {type: "application/pdf"});
console.log(blob);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
var fileName = reportName;
link.download = fileName;
console.log('click');
link.click();
};
}
Log in JS File:
components.component.ts:31
%PDF-1.4
%����
1 0 obj
<</Creator (Chromium)
/Producer (Skia/PDF m93)
/CreationDate (D:20211013080646+00'00')
/ModDate (D:20211013080646+00'00')>>
endobj
3 0 obj
<</ca 1
/BM /Normal>>
endobj
5 0 obj
<</Filter /FlateDecode
/Length 191>> stream
x�UNK
1 ��Y v��g
...
endstream
endobj
2 0 obj
<</Type /Page
/Resources <</ProcSet [/PDF /Text /ImageB /ImageC /ImageI]
/ExtGState <</G3 3 0 R>>
/Font <</F4 4 0 R>>>>
/MediaBox [0 0 594.95996 841.91998]
/Contents 5 0 R
/StructParents 0
/Parent 6 0 R>>
....
/Length 6202>> stream
......
ƀZl� �/%lb����� ��uqD�<@M��%cL,[-���x�?� �i
endstream
endobj
9 0 obj
<</Type /FontDescriptor
/FontName /LiberationSerif-Bold
/Flags 4
/Ascent 891.11328
/Descent -216.30859
/StemV 83.984375
/CapHeight 654.78516
/ItalicAngle 0
/FontBBox [-543.94531 -303.22266 1344.23828 1007.8125]
/FontFile2 8 0 R>>
endobj
10 0 obj
<</Type /Font
/FontDescriptor 9 0 R
/BaseFont /LiberationSerif-Bold
/Subtype /CIDFontType2
/CIDToGIDMap /Identity
/CIDSystemInfo <</Registry (Adobe)
/Ordering (Identity)
/Supplement 0>>
/W [0 [777.83203 0 0 250] 36 39 722.16797 41 [610.83984 0 777.83203 0 0 0 666.99219 943.84766 0 0 610.83984 0 0 0 666.99219] 68 [500 0 443.84766 0 443.84766] 76 79 277.83203 80 [833.00781 556.15234 500 556.15234 0 0 389.16016 333.00781 0 0 0 500]]
/DW 0>>
endobj
11 0 obj
<</Filter /FlateDecode
/Length 315>> stream
...
xref
0 12
0000000000 65535 f
0000000015 00000 n
0000000452 00000 n
0000000154 00000 n
0000008151 00000 n
0000000191 00000 n
0000000672 00000 n
0000000727 00000 n
0000000774 00000 n
0000007062 00000 n
0000007307 00000 n
0000007765 00000 n
trailer
<</Size 12
/Root 7 0 R
/Info 1 0 R>>
startxref
8296
%%EOF
components.component.ts:33 Blob {size: 14143, type: 'application/pdf'}
NodeJS file:
exports.pdf = functions.region('europe-west3').https.onCall(async (data, context) => {
appCheck(context)
return createTicket(data)
});
async function createTicket(data){
const puppeteer = require('puppeteer')
const handlebars = require("handlebars")
const fs = require("fs")
require("intl")
const path = require("path")
var browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] })
var templateHtml = await fs.readFileSync(path.join(process.cwd(), 'ticket.html'), 'utf8')
console.log(templateHtml);
var template = handlebars.compile(templateHtml)
console.log(template);
var html = template()
console.log(html)
html = `<body>
<h1>An example static HTML to PDF</h1>
</body>`
try {
const page = await browser.newPage()
await page.setContent(html)
const buffer = await page.pdf({
format: 'A4',
printBackground: true,
margin: {
left: '0px',
top: '0px',
right: '0px',
bottom: '0px'
}
});
await browser.close()
var bufferArray = await buffer.toString()
return bufferArray
} catch (err) {
await browser.close()
return({
err
})
}
}
JS File:
async getPDF(){
var pdf = firebase.app().functions('europe-west3').httpsCallable('pdf');
pdf({Name: 'Test',Name2: 'Test2'}).then(async (result:any) => {
console.log(result.data);
//var sampleArr = base64ToArrayBuffer(result.data);
saveByteArray("Sample Report", result.data);
}).catch((error) => {
console.log(error);
return 0;
});
function saveByteArray(reportName, byte) {
console.log(byte);
var blob = new Blob([byte], {type: "application/pdf"});
console.log(blob);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
var fileName = reportName;
link.download = fileName;
console.log('click');
link.click();
};
}
Log in JS File:
components.component.ts:31
%PDF-1.4
%����
1 0 obj
<</Creator (Chromium)
/Producer (Skia/PDF m93)
/CreationDate (D:20211013080646+00'00')
/ModDate (D:20211013080646+00'00')>>
endobj
3 0 obj
<</ca 1
/BM /Normal>>
endobj
5 0 obj
<</Filter /FlateDecode
/Length 191>> stream
x�UNK
1 ��Y v��g
...
endstream
endobj
2 0 obj
<</Type /Page
/Resources <</ProcSet [/PDF /Text /ImageB /ImageC /ImageI]
/ExtGState <</G3 3 0 R>>
/Font <</F4 4 0 R>>>>
/MediaBox [0 0 594.95996 841.91998]
/Contents 5 0 R
/StructParents 0
/Parent 6 0 R>>
....
/Length 6202>> stream
......
ƀZl� �/%lb����� ��uqD�<@M��%cL,[-���x�?� �i
endstream
endobj
9 0 obj
<</Type /FontDescriptor
/FontName /LiberationSerif-Bold
/Flags 4
/Ascent 891.11328
/Descent -216.30859
/StemV 83.984375
/CapHeight 654.78516
/ItalicAngle 0
/FontBBox [-543.94531 -303.22266 1344.23828 1007.8125]
/FontFile2 8 0 R>>
endobj
10 0 obj
<</Type /Font
/FontDescriptor 9 0 R
/BaseFont /LiberationSerif-Bold
/Subtype /CIDFontType2
/CIDToGIDMap /Identity
/CIDSystemInfo <</Registry (Adobe)
/Ordering (Identity)
/Supplement 0>>
/W [0 [777.83203 0 0 250] 36 39 722.16797 41 [610.83984 0 777.83203 0 0 0 666.99219 943.84766 0 0 610.83984 0 0 0 666.99219] 68 [500 0 443.84766 0 443.84766] 76 79 277.83203 80 [833.00781 556.15234 500 556.15234 0 0 389.16016 333.00781 0 0 0 500]]
/DW 0>>
endobj
11 0 obj
<</Filter /FlateDecode
/Length 315>> stream
...
xref
0 12
0000000000 65535 f
0000000015 00000 n
0000000452 00000 n
0000000154 00000 n
0000008151 00000 n
0000000191 00000 n
0000000672 00000 n
0000000727 00000 n
0000000774 00000 n
0000007062 00000 n
0000007307 00000 n
0000007765 00000 n
trailer
<</Size 12
/Root 7 0 R
/Info 1 0 R>>
startxref
8296
%%EOF
components.component.ts:33 Blob {size: 14143, type: 'application/pdf'}