Javascript 在 PDF 中嵌入 SVG（使用 JS 将 SVG 导出为 PDF）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5913338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embedding SVG in PDF (exporting SVG to PDF using JS)
提问by Simeon
The starting points: I don't have a server that can provide anything but static files. And I have an SVG element (dynamically created) in my <body>that I want to export to a vector format, preferrably PDF or SVG.
起点：我没有可以提供静态文件以外的任何内容的服务器。我有一个 SVG 元素（动态创建的）<body>，我想将其导出为矢量格式，最好是 PDF 或 SVG。
I started looking at using the already existing lib jsPDFalong with downloadify. It worked fine. Unfortunately, this does not support SVG, only text.
我开始考虑使用现有的 lib jsPDF和downloadify。它工作得很好。不幸的是，这不支持 SVG，只支持文本。
I've read about the PDF format's possiblities to embed SVG images, and it seemsto have been enabled since Acrobat Reader 5 (along with the ImageViewer plugin). But it doesn't work. I've tried with 3 different PDF readers without success.
我已经阅读了 PDF 格式嵌入 SVG 图像的可能性，并且它似乎自 Acrobat Reader 5（以及 ImageViewer 插件）以来已启用。但它不起作用。我尝试了 3 种不同的 PDF 阅读器，但没有成功。
Does this mean that PDFs has dropped SVG embedding support? I haven't found anything on this.
这是否意味着 PDF 已经放弃了 SVG 嵌入支持？我没有找到任何关于这个的东西。
I have two questions; can this be solved? And if yes, what are the specifications for embedding SVG inside of a PDF? With that info, I can build that support in jsPDF myself.
我有两个问题；这可以解决吗？如果是，在 PDF 中嵌入 SVG 的规范是什么？有了这些信息，我就可以自己在 jsPDF 中构建这种支持。
The browser support demands are Safari, Chrome and Firefox. The versions that supports SVG.
浏览器支持需求为 Safari、Chrome 和 Firefox。支持 SVG 的版本。
采纳答案by Florian Ledermann
For anyone looking for a JS-only solution: PDFKitseems to be the superior solution to generate PDF from JS these days, and it supports all SVG geometry primitives (including interpreting pathgeometry strings) out of the box. All that would be needed to render existing SVG content would be a DOM-walker that keeps track of CSS styling and inheritance, if you do not require complex stuff like symbols etc.
对于寻找纯JS 解决方案的任何人：PDFKit似乎是当今从 JS 生成 PDF 的卓越解决方案，并且它支持所有path开箱即用的SVG 几何原语（包括解释几何字符串）。如果您不需要诸如符号等复杂的东西，那么渲染现有 SVG 内容所需的一切将是一个跟踪 CSS 样式和继承的 DOM-walker。
I wasn't successful with the sketchy SVG support of the jsPDF/svgToPdfcombo mentioned in the other answer, and the source code of these two didn't look very well-crafted and complete to me.
我在另一个答案中提到的jsPDF/ svgToPdf组合的粗略 SVG 支持没有成功，而且这两个的源代码对我来说看起来不是很好且完整。
Edit: Usage example JSFiddle
编辑：用法示例JSFiddle
回答by Simeon
I'll reply to my own question. I ended up using DocRaptorthat can be called client-side from JavaScript. This technically solves my problem, even though it is a non-free solution. If I the answer could be a server-side-solution, I could use wkhtmltopdfas proposedby Mic.
我会回答我自己的问题。我最终使用了可以从 JavaScript 调用客户端的DocRaptor。这在技术上解决了我的问题，即使它是一个非免费的解决方案。如果我的回答可能是一个服务器端的解决方案，我可以用wkhtmltopdf作为提议的麦克风。
回答by stackex
jsPDFhas a plugin for that: svgToPdf:
jsPDF有一个插件：svgToPdf：
https://github.com/ahwolf/jsPDF/blob/master/jspdf.plugin.svgToPdf.js
https://github.com/ahwolf/jsPDF/blob/master/jspdf.plugin.svgToPdf.js
I haven't tried it, but this could allow discarding the use of an external API and/or having to rely on a server-side solution.
我还没有尝试过，但这可能允许放弃使用外部 API 和/或不得不依赖服务器端解决方案。
回答by Mic
Did you try WKHTMLTOPDF? It's a free tool based on webkit.
We wrote a small tutorial here.
你试过 WKHTMLTOPDF 吗？它是一个基于 webkit 的免费工具。
我们在这里写了一个小教程。
On a Mac, with Safari or Chrome, you can save an HTML page with embedded SVG to a PDF.
Since these browsers use WKHTMLTOPDF internally, may be this will work for you as well.
在 Mac 上，使用 Safari 或 Chrome，您可以将带有嵌入式 SVG 的 HTML 页面保存为 PDF。
由于这些浏览器在内部使用 WKHTMLTOPDF，因此这可能也适用于您。
回答by EvoPdf
EVO HTML to PDF Converter has support for converting the SVG embedded in HTML to PDF. You can see an example for this feature here : http://www.evopdf.com/demo/HTML_to_PDF/HTML5_Features/SVG_to_PDF.aspx. The sample code for this is:
EVO HTML to PDF Converter 支持将嵌入在 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();
