使用jspdf渲染Svg到PDF使用jspdf

我在使用jspdf將svg元素渲染爲pdf時遇到困難。 Iam使用插件https://github.com/CBiX/svgToPdf.js/來做到這一點。使用jspdf渲染Svg到PDF使用jspdf

下面是我的代碼

// 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

據generarting空白的PDF。請幫助

來源

2014-12-30 Priyesh Tiwari

svgToPdf只支持克，線，矩形，橢圓形，圓形，文本元素和一些屬性。把它作爲一個簡單的演示。 – cuixiping

@Priyesh Tiwari：我得到同樣的問題svg pdf轉換，你是如何解決你的問題？ –

您可以使用canvg來做到這一點。

第一步：獲取「SVG」標記從DOM

代碼

var svg = document.getElementById('svg-container').innerHTML; 

    if (svg) 
    svg = svg.replace(/\r?\n|\r/g, '').trim();

第2步：使用 canvg創建帆布從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

來源

2016-03-04 05:52:53 Purushoth

您的JSFiddle在Firefox上無法正常工作（我嘗試使用FF47 Windows） – Basj

任何控制檯錯誤？ @Basj – Purushoth

當我點擊「Get PDF」@Purushoth時，沒有任何反應，這裏是錯誤'ReferenceError：canvg is not defined'。看來你的jsfiddle中的鏈接設置不正確：https：//gabelerner.github.io/canvg/canvg.js不存在。你能更新嗎？提前致謝！ – Basj

使用jspdf渲染Svg到PDF使用jspdf

回答

相關問題