Nodejs生成pdf文件流+前端通过二进制流下载pdf

最新推荐文章于 2024-08-21 14:29:01 发布

佛天华

最新推荐文章于 2024-08-21 14:29:01 发布

阅读量1.3k

点赞数 1

文章标签：前端 pdf javascript

本文链接：https://blog.csdn.net/fth1002853070/article/details/130106781

版权

该文章展示了如何利用Nodejs的pdfkit库在后端生成PDF文档，并通过axios发送响应式流到前端。前端则使用downloadjs下载这个PDF文件。示例代码包括创建PDF文档，添加文本、图形以及链接，以及处理HTTP响应的Blob类型。

摘要由CSDN通过智能技术生成

后端：Nodejs + pdfkit 生成pdf
前端：通过 downloadjs生成pdf文件

1、后端代码

const PDFDocument = require('pdfkit');
const fs = require('fs');
exports.createPdf = (req, res) => {
	const doc = new PDFDocument();
	// doc.pipe(fs.createWriteStream('output.pdf'));  // 在服务端生成pdf文件

	// Embed a font, set the font size, and render some text
	doc
		.fontSize(25)
		.text('Some text with an embedded font!', 100, 100);

	// Add another page
	doc
		.addPage()
		.fontSize(25)
		.text('Here is some vector graphics...', 100, 100);

	// Draw a triangle
	doc
		.save()
		.moveTo(100, 150)
		.lineTo(100, 250)
		.lineTo(200, 250)
		.fill('#FF3300');

	// Apply some transforms and render an SVG path with the 'even-odd' fill rule
	doc
		.scale(0.6)
		.translate(470, -380)
		.path('M 250,75 L 323,301 131,161 369,161 177,301 z')
		.fill('red', 'even-odd')
		.restore();

	// Add some text with annotations
	doc
		.addPage()
		.fillColor('blue')
		.text('Here is a link!', 100, 100)
		.underline(100, 100, 160, 27, { color: '#0000FF' })
		.link(100, 100, 160, 27, 'http://google.com/');

	// Finalize PDF file
	doc.pipe(res);  // 通过res 将pdf文件流返回给前端
	doc.end();
};

2、前端代码

    import axios from 'axios'
    import downloadjs from 'downloadjs';
    export default {
        mounted() {
            axios.get('http://localhost:9202/createPdf', {
                responseType: 'blob',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                downloadjs(res.data, 'demo.pdf', 'application/pdf');
            }).catch(err => {
                console.error(err);
            })
        }
    }