将 html-pdf 与动态数据一起使用

Question

目前我正在测试html-pdf模块以从 html 生成 pdf。 我已经成功生成了一个。 但问题是 html 中的文本/数据目前是固定的。

我想做的是在前端有一个用户填写的html表单，然后生成一个包含用户输入内容的pdf。

到目前为止我做了什么：

app.post('/pdf',function(req, res) {

  pdf.create(html, options).toFile('./businesscard.pdf', function(err, res) {
   if (err) return console.log(err);
     console.log(res);
   });

});

这可能使用html-pdf吗？ 任何帮助将不胜感激。

Answer 1

不幸的是， html-pdf模块无法处理动态数据。 您可以看一下进行屏幕捕获的phantomjs 。

实际上， html-pdf模块在后台使用“ phantomjs”。 但是，它使用了phantomjs的小功能。

Answer 2

您可以查看dynamic-html-pdf

只需按照以下步骤操作：

1. 使用此命令npm install dynamic-html-pdf --save

2. 创建 html 模板

3. 使用以下代码创建pdf：

    var fs = require('fs'); var pdf = require('dynamic-html-pdf'); var html = fs.readFileSync('template.html', 'utf8'); pdf.registerHelper('ifCond', function (v1, v2, options) { if (v1 === v2) { return options.fn(this); } return options.inverse(this); }) var options = { format: "A3", orientation: "portrait", border: "10mm" }; //Your dynamic data var users = [ { name: 'aaa', age: 24, dob: '1/1/1991' }, { name: 'bbb', age: 25, dob: '1/1/1995' }, { name: 'ccc', age: 24, dob: '1/1/1994' } ]; var document = { type: 'buffer', // 'file' or 'buffer' template: html, context: { users: users }, path: "./output.pdf" // it is not required if type is buffer }; pdf.create(document, options) .then(res => { console.log(res) }) .catch(error => { console.error(error) });

Answer 3

我正在寻找相同的解决方案并得到了解决方案。

https://medium.com/free-code-camp/how-to-generate-dynamic-pdfs-using-react-and-nodejs-eac9e9cb4dde

您可以在博客中查看这项工作。 他只是调用了一个返回 HTML 字符串的函数，并使用反引号表示动态数据。