如何在角度2中使用canvg和svg到pdf？答案

【问题标题】：How to use canvg and svg to pdf in angular 2?如何在角度2中使用canvg和svg到pdf？
【发布时间】：2018-06-27 17:35:08
【问题描述】：

这是我的脚本代码。我正在使用 JSPdf。

//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);

function getPdf() {
  //Get svg markup as string
  var svg = document.getElementById('svg-container').innerHTML;

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

  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');


  context.clearRect(0, 0, canvas.width, canvas.height);
  canvg(canvas, svg);


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

}

我在 index.html 中添加了这个脚本

  <script src="assets/canvg.js"></script>

我们需要添加canvg脚本文件并在Component中使用canvg函数。如何在angular 2中使用文件？

【问题讨论】：

标签： javascript angularjs canvas svg canvg

【解决方案1】：

在“canvg.js”脚本中，我从第 26 行删除了“jsdom”的逻辑，如下所示：

var nodeEnv = false;
var windowEnv = window, ImageClass, CanvasClass,
    defaultClientWidth = 800, defaultClientHeight = 600;
if (!windowEnv.DOMParser) {

我已经从Link前进了一步

let svg = test.outerHTML;
if (svg) {
  svg = svg.replace(/\r?\n|\r/g, '').trim();
}
const canvas = document.createElement('canvas');
canvg(canvas, svg, {});
const imgData = canvas.toDataURL('image/png');
pdf.addImage(imgData, 'PNG', 40, 40, 75, 75);
pdf.save('pdf_file.pdf');

对我来说效果很好。

【讨论】：