【发布时间】：2018-08-31 10:20:38
【问题描述】：
我需要我的网络应用程序（基于反应）来生成一个 pdf 文件。该文件将包含文本、表格和带有生成内容的画布。
我决定使用浏览器的内置打印功能来实现这一点（我也尝试过pdfkit 和react-pdf，但认为使用 html 和 css 进行布局效果最好）。
问题在于生成的 PDF 文件相对较大（超过 10MB，而可接受的最大值约为 1MB）。
我确实尝试通过使用canvas.toDataURL('image/jpeg', 0.8) 生成 JPEG 并使用 dataURL 而不是画布来减小大小。
这确实会减少 Chrome 和 Safari 中的文件大小，但不会减少 Firefox 中的文件大小。
使用 Inkscape 导入 PDF，然后导出为 SVG，然后使用文本编辑器对其进行检查（请告诉我有更简单的工作流程）我发现 Chrome 和 Safari 确实嵌入了 JPEG，但 Firefox 使用嵌入为 PNG 文件的图像。
有什么方法可以改变 Firefox 中的这种行为？我看到的唯一其他选择是使用 pdfkit 之类的库从 Javascript 生成 PDF 文件 - 这将以轻松自定义布局为代价。
小例子：
<!DOCTYPE html>
<html>
<head></head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Forum_romanum_1880.jpg" />
</body>
</html>
使用 Google Chrome 打印到 PDF 不到 200KB，使用 Firefox 打印到 PDF 超过 1MB
【问题讨论】：
-
@HelderSepu 你需要什么代码？最小的问题代码是：HTML 页面上的 JPEG 被 firefox 打印为 pdf。
-
@HelderSepu 添加了一个明确的示例
-
理想情况下，您应该添加所有代码来生成 PDF，以便其他人可以复制它，您谈到了画布，但您的示例不包括任何画布
-
问题可以分解为只有一张 jpg 图像的最小示例。我的画布通过发布的代码转换为 80% 质量的 jpg。 pdf由浏览器打印功能生成。在 js 中生成 pdf 是我想要避免的。
标签： javascript pdf firefox canvas printing