在 PDF 中嵌入 SVG(使用 JS 将 SVG 导出为 PDF)

IT技术 javascript pdf svg pdf-generation
2021-03-12 12:28:49

起点:我没有可以提供静态文件以外的任何内容的服务器。我有一个 SVG 元素(动态创建)<body>,我想将其导出为矢量格式,最好是 PDF 或 SVG。

我开始考虑使用现有的 lib jsPDFdownloadify它工作得很好。不幸的是,这不支持 SVG,只支持文本。

我已经阅读了 PDF 格式嵌入 SVG 图像的可能性,并且它似乎自 Acrobat Reader 5(以及 ImageViewer 插件)以来已启用。但它不起作用。我尝试了 3 种不同的 PDF 阅读器,但没有成功。

这是否意味着 PDF 已经放弃了 SVG 嵌入支持?我没有找到任何关于这个的东西。

我有两个问题;这可以解决吗?如果是,在 PDF 中嵌入 SVG 的规范是什么?有了这些信息,我就可以自己在 jsPDF 中构建这种支持。

浏览器支持需求为 Safari、Chrome 和 Firefox。支持 SVG 的版本。

6个回答

对于任何寻找JS 解决方案的人来说:PDFKit似乎是如今从 JS 生成 PDF 的卓越解决方案,它支持所有path开箱即用的SVG 几何原语(包括解释几何字符串)。如果您不需要符号等复杂的东西,那么渲染现有 SVG 内容所需的一切将是一个 DOM-walker,它可以跟踪 CSS 样式和继承。

在另一个答案中提到jsPDF / svgToPdf组合的粗略 SVG 支持没有成功,而且这两个的源代码对我来说看起来不是很好且完整。

编辑:用法示例JSFiddle

不支持图片标签!?
2021-04-22 12:28:49
PDFKit 与github.com/alafr/SVG-to-PDFKit相结合似乎是要走的路。
2021-05-04 12:28:49
一个问题。1. 打开pdfkit.org/demo/browser.html2. 打开 Chrome 检查窗口。3. 单击顶部菜单上的“切换设备工具栏”图标。4. 刷新页面。5. 我无法在移动视图的右侧窗口中看到 pdf。6. 有谁知道为什么移动视图没有呈现 PDF。? 在移动设备上打开 pdf 是 PDFKit 特定问题还是一般问题?
2021-05-05 12:28:49
不能直接把html转pdf
2021-05-15 12:28:49

我会回答我自己的问题。我最终使用了可以从 JavaScript 调用客户端的DocRaptor这在技术上解决了我的问题,即使它是一个非免费的解决方案。如果我的回答可能是一个服务器端的解决方案,我可以用wkhtmltopdf作为提议的麦克风。

添加了您的答案并删除了 Prince XML 作为替代方案,谢谢!
2021-04-16 12:28:49
感谢您提供 DocRaptor 的链接。如果您选择托管内容,则可以使用 WKHTMLTOPDF,因为它是免费且开源的
2021-05-10 12:28:49

jsPDF有一个插件:svgToPdf

https://github.com/ahwolf/jsPDF/blob/master/jspdf.plugin.svgToPdf.js

我还没有尝试过,但这可能允许放弃使用外部 API 和/或不得不依赖服务器端解决方案。

我目前正在尝试这种方法,但我似乎只能从中获得一个空白的 pdf。你知道那里有使用这个插件的例子吗?
2021-05-05 12:28:49

你试过 WKHTMLTOPDF 吗?它是一个基于 webkit 的免费工具。
我们在这里写了一个小教程

在 Mac 上,使用 Safari 或 Chrome,您可以将带有嵌入式 SVG 的 HTML 页面保存为 PDF。
由于这些浏览器在内部使用 WKHTMLTOPDF,因此这可能也适用于您。

@art-solopov,时代变了,如上所述,你可以切换到pdfkit:pdfkit.org/docs/vector.html
2021-04-30 12:28:49
不幸的是,我仍然无法使 wkhtmltopdf 工作。它只为我生成空白页。
2021-05-05 12:28:49
我在这里要求一个客户端解决方案。但是,您是对的,因为我没有指定我要使用的浏览器支持。所以我现在编辑了我的答案以包括
2021-05-10 12:28:49

使用pdfkit,svg-to-pdfkit和 的最小示例blob-stream将 SVG DOM 元素下载为 PDF。

  1. 在您的index.html.
<script src="https://cdn.jsdelivr.net/npm/pdfkit@0.10.0/js/pdfkit.standalone.js"></script>
<script src="https://bundle.run/blob-stream@0.1.3"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-to-pdfkit@0.1.8/source.js"></script>
  1. 运行此函数,其中svg是 SVG DOM 元素或 SVG 字符串。
function downloadPDF(svg, outFileName) {
    let doc = new PDFDocument({compress: false});
    SVGtoPDF(doc, svg, 0, 0);
    let stream = doc.pipe(blobStream());
    stream.on('finish', () => {
      let blob = stream.toBlob('application/pdf');
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = outFileName + ".pdf";
      link.click();
    });
    doc.end();
}