Bootstrap 生成的 HTML 文件不使用 wkhtmltopdf 在 PDF 中呈现 CSS答案

【问题标题】：Bootstrap generated HTML files not rendering CSS in PDF using wkhtmltopdfBootstrap 生成的 HTML 文件不使用 wkhtmltopdf 在 PDF 中呈现 CSS
【发布时间】：2019-05-21 20:04:36
【问题描述】：

我正在尝试使用 wkhtmltopdf 将 HTML 文件转换为 PDF 文件，它正在正确创建文件但缺少所有与引导相关的样式。

下面是用于将 HTML 转换为 PDF 的 LINUX 命令：

xvfb-run --server-args="-screen 0, 1024x768x24" wkhtmltopdf $htmlFile $pdfFile

应用程序启用了 HTTPS，所有 HTML 文件都以 HTTPS 的形式采购，如下所示：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
https://code.jquery.com/jquery-2.2.4.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
https://code.jquery.com/ui/1.11.4/jquery-ui.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

感谢任何帮助，因为我被卡住了，不确定为什么引导样式无法正确加载。

【问题讨论】：

将域及其 IP 添加到您的主机文件？ github.com/wkhtmltopdf/wkhtmltopdf/issues/2120你遇到了什么错误？

标签： php twitter-bootstrap-3 centos7

【解决方案1】：

wkhtmltopdf 不适用于 Bootstrap。如果您在互联网上搜索，您会发现有些人建议明确设置视口大小（这似乎对某些版本进行了修复）。将此添加到您的命令中：

--viewport-size 1024x768

在你的情况下，你会得到：

xvfb-run --server-args="-screen 0, 1024x768x24" wkhtmltopdf --viewport-size 1024x768 $htmlFile $pdfFile

另一个（我发现的最好的）解释是 Bootstrap 在媒体查询中包含所有 col-xx-n 类，除了 col-xs-n 类。将 col-xs-n 类添加到所有元素可能会解决您的问题。对我来说，解决了除了动态生成的内容（使用 jQuery）之外的问题。

【讨论】：

【解决方案2】：

而是wkhtmltopdf 对链接的 CSS 和 JS 文件有问题。你想内联所有需要的 CSS 和 JS！很难给出一个代码示例，这取决于你的后端/服务器端。

【讨论】：