使用jspdf/pdfmake创建PDF与将页面打印为PDF的优点是什么？

Question

我希望在浏览器扩展标签页中创建PDF报告。我想添加图表、文本、UTF-8支持、图片，定位文本但不需要过于复杂的样式和布局。

我已经了解了jspdf（没有UTF8支持）和pdfmake的限制。它们似乎会很复杂，有很多陷阱。

我的一个想法是：

1. 直接将所需的HTML放在页面上。 2. 使用CSS隐藏除报告HTML之外的所有内容，并使用“@media print”样式来设计报告。 3. 在JavaScript中触发“window.print()”以打印页面。Chrome显示预览并允许您在单击后保存为PDF。Firefox的打印预览显示预览，界面有点混乱，但是您可以在几个点击后保存为PDF。

我有什么遗漏吗？我的方法有什么主要缺点吗？也许有特定于操作系统的问题吗？为什么你会使用jspdf或pdfmake？

我没有看到任何地方建议使用这种方法，这让我感到奇怪。唯一的缺点是用户可能会对被要求打印PDF感到困惑，但由于报告不经常生成，这并不是一个大问题。

- fstr

Answer 1

这与Marko Tošić所说的恰好相反。实际上，从浏览器打印并不会生成PDF作为图片（您可以自己快速测试一下）。但是大多数情况下，您需要使用HTML-> Canvas与jsPDF / pdfmake。 pdfmake对HTML-> PDF的支持不太好：https://github.com/bpampuch/pdfmake/issues/205 jspdf在将HTML转换为PDF时不支持外部CSS。

在pdfmake和jsPDF中，如果您想使您的PDF看起来与HTML相同，您需要做HTML-> Canvas，然后将Canvas粘贴为PDF内的图片。

就HTML-> PDF而言，从浏览器打印始终比javascript PDF库具有更好的结果。

如果您想使PDF文件可下载，请查看服务器端的phantomJS或headless chrome。

回答您的问题：

jspdf / pdfmake的好处：

-如您所提到的，jspdf / pdfmake为用户提供真正的“下载”体验，而不是将“打印”重新设计为下载。

-与phantomJS或无头chrome解决方案相比，它不需要服务器端实现。

打印的好处：

-更好的HTML-> PDF结果（支持所有HTML标记和CSS）。

- Kan Zhang

---

jspdf/pdfmake的其他一些好处包括：可以生成不带完整HTML页面的PDF文件；可以更精细地控制PDF的各个细节。 - undefined

Answer 2

通常生成的PDF文件需要书签、目录和其他链接，这些无法通过浏览器打印实现。

- Viachaslau T

Answer 3

任何与 window.print() API 相关的内容都会 停止/暂停 调用该 API 的浏览器选项卡中的 JavaScript 引擎。因此，如果您的页面或应用程序需要在后台持续运行 JavaScript，则在新选项卡中创建 PDF 可能是更好的解决方案。

- Dietmar Stupka

Answer 4

据我所知，从浏览器打印总是生成图像格式的PDF（无法选择文本或元素）。因此文件大小较大。我认为这两种方法都使用了ht2ml->canvas，然后将画布作为图片粘贴到PDF中。

jsPDF和pdfmake可以让您生成带有“真实”文本和元素的PDF。这样做更困难，但质量和文件大小更好。这取决于您的使用情况。

- Marko Tošić

---

从浏览器打印总是生成PDF作为图片，这已经不再正确。我可以使用Google Chrome版本72.0.3626.109（官方构建）（64位）将HTML打印为PDF，并且内容可搜索。 - undefined