在PDF中嵌入SVG（使用JS将SVG导出为PDF）

Question

起点：我没有可以提供除静态文件之外的任何内容的服务器。我的 中有一个 SVG 元素（动态创建），我想将其导出为矢量格式，最好是 PDF 或 SVG。

我开始考虑使用现有的库 jsPDF 以及 下载。效果很好。不幸的是，这不支持 SVG，只支持文本。

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

这是否意味着 PDF 已放弃 SVG 嵌入支持？我还没有找到任何关于这方面的东西。

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

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

Answer 1

对于任何寻找纯 JS 解决方案的人来说： PDFKit 似乎是生成的最佳解决方案如今来自 JS 的 PDF，它开箱即用地支持所有 SVG 几何基元（包括解释 path 几何字符串）。如果您不需要符号等复杂的东西，渲染现有 SVG 内容所需的一切将是一个 DOM-walker，它可以跟踪 CSS 样式和继承。

我对 jsPDF/svgToPdf 组合，这两个组合的源代码对我来说看起来不是很精心制作和完整。

编辑：用法示例 JSFiddle

Answer 2

jsPDF 有一个插件：svgToPdf：

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

我没试过，但这可能允许放弃使用外部 API 和/或必须依赖服务器端解决方案。

Answer 3

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

Answer 4

您尝试过 WKHTMLTOPDF 吗？它是一个基于webkit的免费工具。
我们写了一个小教程 此处。

在 Mac 上，使用 Safari 或 Chrome，您可以将嵌入 SVG 的 HTML 页面保存为 PDF。
由于这些浏览器在内部使用 WKHTMLTOPDF，因此这可能适合您，因为出色地。

Answer 5

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

1. 在 index.html 中导入包。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/pdfkit.standalone.js"></script>
<script src="https://bundle.run/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/source.js"></script>

2. 运行此函数，其中 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();
}

Answer 6

EVO HTML 到 PDF 转换器支持将 HTML 中嵌入的 SVG 转换为 PDF。您可以在此处查看此功能的示例： http://www.evopdf.com /demo/HTML_to_PDF/HTML5_Features/SVG_to_PDF.aspx 。其示例代码是：

// Create a HTML to PDF converter object with default settings
HtmlToPdfConverter htmlToPdfConverter = new HtmlToPdfConverter();

// Convert the HTML page with SVG to a PDF document in a memory buffer
byte[] outPdfBuffer = htmlToPdfConverter.ConvertUrl(urlHtmlWithSVG);

// Send the PDF as response to browser

// Set response content type
Response.AddHeader("Content-Type", "application/pdf");

// Instruct the browser to open the PDF file as an attachment or inline
Response.AddHeader("Content-Disposition", String.Format("attachment; filename=SVG_to_PDF.pdf; size={0}", outPdfBuffer.Length.ToString()));

// Write the PDF document buffer to HTTP response
Response.BinaryWrite(outPdfBuffer);

// End the HTTP response and stop the current page processing
Response.End();