Question

起点：我没有可以提供静态文件的服务器。我在<body>中有一个SVG元素（动态创建），我想导出为矢量格式，最好是PDF或SVG。

我开始考虑使用现有的lib jsPDF和downloadify。它工作正常。不幸的是，这不支持SVG，只支持文本。

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

这是否意味着PDF已经放弃了SVG嵌入支持？我还没有找到任何相关内容。

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

浏览器支持需求包括Safari，Chrome和Firefox。支持SVG的版本。

Answer 1

对于那些寻找仅限JS的解决方案的人来说： PDFKit 似乎是目前从JS生成PDF的优秀解决方案，它支持所有SVG几何原语（包括解释{ {1}}几何字符串）开箱即用。渲染现有SVG内容所需的只是一个DOM-walker，它可以跟踪CSS样式和继承，如果你不需要像符号等复杂的东西。

我对其他答案中提到的 jsPDF / svgToPdf 组合的粗略SVG支持并不成功，而且这两个的源代码没有＆＃ 39;看起来非常精心制作并且对我来说很完美。

Answer 2

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

Answer 3

jsPDF 有一个插件： svgToPdf ：

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

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

Answer 4

您尝试过WKHTMLTOPDF吗？这是一个基于webkit的免费工具我们写了一个小教程here.

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

Answer 5

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();

Answer 6

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

在您的 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>

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

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

6 个答案: