Javascript 使用CDN库和外部样式表将HTML转换为PDF_Javascript_Css_Twitter Bootstrap_Jspdf

Javascript 使用CDN库和外部样式表将HTML转换为PDF

javascript css twitter-bootstrap

Javascript 使用CDN库和外部样式表将HTML转换为PDF,javascript,css,twitter-bootstrap,jspdf,Javascript,Css,Twitter Bootstrap,Jspdf,我用bootstrap和material design lite设计了我的简历，现在我想把html页面转换成pdf文件我尝试了一些库（jsPdf）和一些工具（html2pdf、princexml），它会生成pdf文件，但问题是，pdf与html页面中的外观不同没有样式，我得到的输出类似于在浏览器中按ctrl+p` 我的问题是,，有什么工具或库可以解决我的问题吗？或上述工具中是否有我可以使用的选项？ pdf输出在后端尝试此转换器。它输出您在浏览器中看到的内容。它支持html、css甚至j

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

我尝试了一些库（jsPdf）和一些工具（html2pdf、princexml），它会生成pdf文件，但问题是，pdf与html页面中的外观不同

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

我的问题是,， 有什么工具或库可以解决我的问题吗？ 或 上述工具中是否有我可以使用的选项？

pdf输出

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

使用运行时，它可以像这样使用

wkhtmltopdf http://google.com google.pdf

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

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

转到并下载最新版本

在项目中包括以下脚本：

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_font_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>

对我来说，这创建了一个漂亮整洁的PDF，其中只包括“将此打印到PDF”一行

请注意，特殊元素处理程序只处理当前版本中的ID，这在。它说：

因为匹配是针对节点树中的每个元素进行的，所以我希望尽可能快地进行匹配。在这种情况下，这意味着“仅匹配元素id”，元素id仍然以jQuery样式“#id”完成，但这并不意味着支持所有jQuery选择器

因此，将“#ignorePDF”替换为诸如“.ignorePDF”之类的类选择器对我不起作用。相反，您必须为每个元素添加相同的处理程序，您希望忽略这些元素，如：

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

从标签中还可以选择“a”或“li”等标签。但对于大多数用例来说，这可能有点不受限制：

我们支持特殊的元素处理程序。使用jQuery样式注册它们 ID或节点名称的ID选择器。（“#iAmID”、“div”、“span”等）不支持任何其他类型的选择器（类，或复合）此时

需要补充的一件非常重要的事情是，您将丢失所有样式信息（CSS）。幸运的是，jsPDF能够很好地格式化h1、h2、h3等，这对于我来说已经足够了。此外，它将只打印文本节点内的文本，这意味着它不会打印textareas等的值。示例：

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>



打印我

您的问题在于引导库，而不是您正在使用的任何插件或PDF工具。“打印”网页时，它会删除大多数样式，包括打印到PDF。我的公司是DocRaptor HTML to PDF服务，它提供了一系列建议修复程序，用于正确打印引导样式，但它们可以概括为：

使用屏幕CSS模式/规则打印，而不是打印。否则，您必须对引导进行大量重写才能使其正常工作。使渲染器使用屏幕模式更容易
Bootstrap会认为大多数PDF都是一个非常小的设备，比如手机，所以您必须调整断点或代码列定义
如果您的最后一列下降到新行，这是因为引导将许多列的宽度定义为XX.666 7%。PDF引擎将所有这些加起来，由于最后的7，技术上大于100%。由于行宽度超过100%，它会将最后一列碰撞到新行。修复方法是覆盖引导的列宽（）

出于好奇，Ctrl+P有什么问题？是的，Ctrl-P不应该包括样式设置吗？当我尝试按Ctrl+pI时，输出pdf中没有样式，但输出相同。是否有包含外部文件的方法。我试过了，但没用。wkhtmltopdf--user style sheet--user style sheet--user style sheet--run script final.pdf您使用哪种后端？我在apache httpd服务器上运行它，但后端中没有任何内容您能提供一些示例吗？wkhtmltopdf无法加载css的赛前-赛后。选中右css包含路径。不要使用相对路径。请显示包含部分html的样式。

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>