Question

我用bootstrap和material design lite设计了我的简历，现在我想将html页面转换为pdf文件。

我尝试了一些库（jsPdf）和一些工具（html2pdf，princexml），它生成pdf文件，但问题是，pdf不是它在html页面中的样子。

没有样式，我得到的输出类似于在浏览器中按ctrl + p`。

我的问题是， 我的问题是否有任何工具或库？ 要么 我可以使用上述工具中的任何选项吗？

pdf输出

Answer 1

在后端尝试使用此转换器WKHTMLTOPDF。它完全输出您在浏览器中看到的内容。它支持html，css甚至js。 Wkhtmltopdf基于webkit。

使用运行时它可以像那样使用

wkhtmltopdf http://google.com google.pdf

在你的情况下，似乎wkhtmltopdf无法加载css。检查右css包含路径。不要使用相对路径。

Answer 2

您的问题是Bootstrap库，而不是您正在使用的任何插件或PDF工具。当您“打印”网页时，它会删除大多数样式，包括打印到PDF。我的公司，DocRaptor HTML到PDF服务，有一个great blog post，其中包含一些建议的修复程序列表，用于正确打印Bootstrap样式，但它们可以概括为：

使用屏幕CSS模式/规则打印，而不是打印。否则，您必须对Bootstrap进行大量覆盖才能使其正常工作。使渲染器使用屏幕模式要容易得多。
Bootstrap会认为大多数PDF都是一个超小型设备，就像手机一样，因此您必须调整断点或代码内列定义。
如果您的最后一列落到新行，这是因为Bootstrap将许多列的宽度定义为XX.66666667％。 PDF引擎增加了所有这些，并且由于最后的7，它在技术上大于100％。由于行宽超过100％，它会将最后一列碰到一个新行。修复是覆盖Bootstrap的列宽（handy Gist file for that）。

Answer 3

jsPDF可以使用插件。为了使其能够打印HTML，您必须包含某些插件，因此必须执行以下操作：

转到https://github.com/MrRio/jsPDF并下载最新版本。
在项目中包含以下脚本：
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js

如果要忽略某些元素，则必须使用ID标记它们，然后可以在jsPDF的特殊元素处理程序中忽略该ID。因此，您的HTML应如下所示：

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

然后使用以下JavaScript代码在PopUp中打开创建的PDF：

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

对我来说，这创造了一个漂亮而整洁的PDF，其中只包含了这一行＆＃39;将其打印到pdf＆＃39;。

请注意，特殊元素处理程序仅处理当前版本中的ID，这也在GitHub Issue中说明。它声明：

因为匹配是针对节点树中的每个元素完成的，所以我希望尽可能快地完成匹配。在这种情况下，它意味着＆＃34;只有元素ID匹配＆＃34;元素ID仍以jQuery样式＆＃34;＃id＆＃34;完成，但并不意味着所有jQuery选择器都受支持。

因此，替换＃ignore dsFF＆＃39;与类选择器，如＆＃39; .ignorePDF＆＃39;不适合我。相反，您必须为每个要忽略的元素添加相同的处理程序，如：

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

从examples开始，还可以选择标签，例如＆＃39; a＆＃39;或者＆＃39; li＆＃39;。对于大多数用例来说，这可能有点无限制：

我们支持特殊元素处理程序。用jQuery样式注册它们 ID或节点名称的ID选择器。（＆＃34;＃iAmID＆＃34;，＆＃34; div＆＃34;，＆＃34; span＆＃34;等）不支持任何其他类型的选择器（class，of 化合物）此时。

要添加的一件非常重要的事情是您丢失了所有的样式信息（CSS）。幸运的是，jsPDF可以很好地格式化h1，h2，h3等，这对我来说已经足够了。另外，它只会在文本节点中打印文本，这意味着它不会打印textareas等的值。例如：

<body> <ul>  <li>Print me!</li> </ul> <div>  <input type="textarea" value="Please print me, too!"> </div> </body>

将带有CDN库和外部样式表的HTML转换为PDF

3 个答案: