使用 jspdf 将 Svg 渲染为 Pdf [英] Render Svg to Pdf using jspdf
本文介绍了使用 jspdf 将 Svg 渲染为 Pdf的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在使用 jspdf 将 svg 元素渲染为 pdf 时遇到问题.我使用插件 https://github.com/CBiX/svgToPdf.js/ 来做到这一点.
I am having trouble in rendering svg element to pdf using jspdf . Iam using plugin https://github.com/CBiX/svgToPdf.js/ to do this.
下面是我的代码
// I recommend to keep the svg visible as a preview
var tmp = document.getElementById("chartContainer");
var svgDoc = tmp.getElementsByTagName("svg")[0];
var pdf = new jsPDF('p', 'pt', 'a4');
svgElementToPdf(svgDoc, pdf, {
scale: 72 / 96, // this is the ratio of px to pt units
removeInvalid: false // this removes elements that could not be translated to pdf from the source svg
});
pdf.output('datauri'); // use output() to get the jsPDF buffer
它正在生成空白的pdf.请帮忙
It is generarting blank pdf. Please help
推荐答案
您可以使用 canvg 做到这一点.
You can do that using canvg.
第一步:从 DOM 中获取SVG"标记代码
Step1: Get "SVG" markup code from DOM
var svg = document.getElementById('svg-container').innerHTML;
if (svg)
svg = svg.replace(/
?
|
/g, '').trim();
第 2 步:使用 canvg 从 svg 创建画布.
Step 2: Use canvg to create canvas from svg.
var canvas = document.createElement('canvas');
canvg(canvas, svg);
第 3 步:使用 .toDataURL()
var imgData = canvas.toDataURL('image/png');
// Generate PDF
var doc = new jsPDF('p', 'pt', 'a4');
doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
doc.save('test.pdf');
在此处查看演示 http://jsfiddle.net/Purushoth/hvs91vpq/193/
Canvg 存储库:https://github.com/gabelerner/canvg
这篇关于使用 jspdf 将 Svg 渲染为 Pdf的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文