当我在 Node JS 中将 html 转换为 pdf 时，pdf 中缺少样式答案

【问题标题】：Styles missing from pdf when I convert html to pdf in Node JS当我在 Node JS 中将 html 转换为 pdf 时，pdf 中缺少样式
【发布时间】：2018-08-25 09:46:38
【问题描述】：

我正在使用一个名为 html-pdf 的节点包将 HTML 转换为 PDF。

我可以创建 PDF，但缺少样式部分。

下面是我的代码：

var html = fs.readFileSync('./charts.html', 'utf8');

var options = { format: 'A4'};

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

如何获得样式？

【问题讨论】：

你在使用外部样式吗？您是否尝试过内联样式？这个模块是否支持它们？
这样引用<link rel="stylesheet" type="text/css" href="../../../assets/css/vendors.min.css">
html-pdf: css and js files do not appear to be processing的可能重复
@Saeed 正如另一个问题中所建议的那样，我尝试提供绝对 URL，但它对我不起作用。
我从不这样做。但是使用 this 这样的模块来内联样式，然后使用 html-pdf 模块。

标签： node.js pdf html-to-pdf

【解决方案1】：

我不知道 html-to-pdf 但我使用了 phantom-html-to-pdf 在这里我使用了 Materialize css 你可以使用 Bootstrap 或者任何你想要的我认为这种方法也适用于

var conversion = require("phantom-html-to-pdf")();
var fs=require("fs");
var resulthtml = "";
resulthtml += '<html>';
resulthtml += '<head>';
resulthtml += '<script src="bower_components/materialize/dist/js/materialize.js"></script>';
resulthtml += '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">';
resulthtml += '<link rel="stylesheet" href="bower_components/materialize/dist/css/materialize.min.css" />';
resulthtml += '</head>';
resulthtml += '<body>';
resulthtml += '<div class="row">';
/* 
       use html body whatever u want

*/
resulthtml += '</div>';
resulthtml += '</body>';
resulthtml += '<html>';
conversion({ html: resulthtml }, function (err, pdf) {

    var output = fs.createWriteStream('sample.pdf');
    console.log(pdf.logs);
    // respond an http request.
    pdf.stream.pipe(output);
});

【讨论】：

【解决方案2】：

直接链接到 .css 文件对我有用。这是暂时的，但我认为这是一个很好的起点。

css 文件在 /public/css 下

app.use(express.static("public"));

 &lt;link href="http://localhost:3000/css/styles.css" rel="stylesheet" type="text/css"&gt;

【讨论】：

【解决方案3】：

我对 html-pdf 也有类似的问题。我最终使用了内联样式标签，这对我来说很有效。

【讨论】：

你是如何使用'inline style tags'解决的？你能在代码中更清楚地表现出来吗？
请解释为什么这是一个解决方案。你的解决方案是做什么的，它是如何解决问题的。（它也应该对发现这个问题的人有教育作用，因为他们有类似的问题。）