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

Posted 2023-03-07

【中文标题】将 html-pdf 与动态数据一起使用

【英文标题】：Using html-pdf with dynamic data

【发布时间】：2017-02-15 00:24:50

【问题描述】：

目前我正在测试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 吗？任何帮助将不胜感激。

【问题讨论】：

为什么点击保存时不生成pdf？

@CodingDefined 是的，我可以这样做，但我仍然如何将用户数据传递给pdf.create，该html 文件作为参数转换为pdf。你明白我的意思吗？

为什么不在用户点击保存时截取网页截图。看看codingdefined.com/2016/01/…

【参考方案1】：

很遗憾，html-pdf 模块无法处理动态数据。您可以查看屏幕截图的phantomjs。

事实上，html-pdf 模块在后台使用“phantomjs”。但是，它使用了phantomjs的小特性。

【参考方案2】：

您可以查看dynamic-html-pdf

只需按照以下步骤操作：

使用此命令安装npm install dynamic-html-pdf --save

创建html模板

使用以下代码创建 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)
);

【参考方案3】：

我正在寻找相同的解决方案并解决了一个问题。

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

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