使用jspdf将Svg渲染为PDF

本文介绍了使用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(/\r?\n|\r/g, '').trim();

第2步:使用 canvg 从svg创建 canvas .

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！