1

这是我的脚本代码。我正在使用 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函数。如何在角度2中使用文件？

4

1 回答 1

0

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

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

并且向前我已经从以下步骤流出：链接

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

对我来说效果很好。

于 2018-07-26T12:49:33.897 回答