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

Posted 2023-03-28

【中文标题】如何在角度2中使用canvg和svg到pdf？

【英文标题】：How to use canvg and svg to pdf in angular 2?

【发布时间】：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中使用文件？

【参考方案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');

对我来说效果很好。