Javascript 如何使用Nest js作为服务器端从Puppeter下载pdf,并在客户端做出反应?
我在后台使用Nest生成一个带有Puppeter的pdf文件。当我给出在磁盘上创建pdf的路径时,Puppeter工作得很好 我目前正在返回pdf 这是生成pdf的代码:Javascript 如何使用Nest js作为服务器端从Puppeter下载pdf,并在客户端做出反应?,javascript,reactjs,pdf,puppeteer,nestjs,Javascript,Reactjs,Pdf,Puppeteer,Nestjs,我在后台使用Nest生成一个带有Puppeter的pdf文件。当我给出在磁盘上创建pdf的路径时,Puppeter工作得很好 我目前正在返回pdf 这是生成pdf的代码: const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); await page.goto('https://blog.risingstack.com', {waitUntil
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://blog.risingstack.com', {waitUntil: 'networkidle0'});
var options = {
width: '1230px',
displayHeaderFooter: false,
margin: {
top: "10px",
bottom: "30px"
},
printBackground: true,
}
const pdf = await page.pdf(options);
await browser.close();
return pdf
这是调用上一个函数的控制器:
@Header('Content-Type', 'application/pdf')
async Printpdf(@Body() message: any) {
console.log(message);
return this.PrintpdfService.printpdf();
}
在React中,我用axios将其命名为:
return axios.post(`http://localhost:3000/printpdf`,data, {
responseType: 'arraybuffer',
headers: {
'Accept': 'application/pdf'
}
});
我正在尝试下载带有以下内容的pdf:
getBuildingReport(data).then((response) => {
console.log(response);
const blob = new Blob([response.data], {type: 'application/pdf'})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `name.pdf`
link.click();
})
.catch(err => {
console.log(err)
});
我遵循了这个教程。
但下载的pdf是正确构建的,无法打开,因为我无法加载pdf文档。我曾经为一个项目解决过这个问题,并保存了该片段。。。关键是将PDF加载到缓冲区,然后将其发送回客户端 下面是在NestJS服务中实现的示例函数:
async generatePDF(): Promise<Buffer> {
const content = fs.readFileSync(
path.resolve(__dirname, './templates/invoice.html'),
'utf-8'
)
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
await page.setContent(content)
const buffer = await page.pdf({
format: 'A4',
printBackground: true,
margin: {
left: '0px',
top: '0px',
right: '0px',
bottom: '0px'
}
})
await browser.close()
return buffer
}
下面是一个示例NestJS控制器:
@Get('/:uuid/pdf')
async getInvoicePdfByUUID(
@Param('uuid', ParseUUIDPipe) uuid: string,
@GetUser() user: User,
@Res() res: Response,
): Promise<void> {
// ...
const buffer = await this.invoicesService.generatePDF()
res.set({
// pdf
'Content-Type': 'application/pdf',
'Content-Disposition': 'attachment; filename=invoice.pdf',
'Content-Length': buffer.length,
// prevent cache
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Pragma': 'no-cache',
'Expires': 0,
})
res.end(buffer)
}
请注意,以上假设您正在将NestJS与Express一起使用
干杯