html2canvas不呈现由CHARTIST.JS生成的SVG图表

Question

我有一个这样的页面

​

我正在尝试使用html2canvas & jspdf将其导出为PDF格式。使用html2canvas将此图表部分转换为canvas后，结果如下所示。

​

​

请帮帮忙，我该怎么办？

​

​

​

​

使用dom-to-image之后

​

Answer 1

//id holds id of wrapper 'div' element which has child as svg graph (your chartist.js graph getting generated)

convertSVG(id) {
    let element = document.getElementById(id);
    html2canvas(element, {useCORS: true, dpi: 144}).then(function(canvas) {
      let img = new Image();
      img.src = canvas.toDataURL('image/png');;
      element.append(img);
      img.onload = function () {
        console.log('I believe, your svg has converted to image');
        var doc = new jsPDF();
        doc.addImage(img, 0, 0, doc.internal.pageSize.width, doc.internal.pageSize.height);
        doc.save("test.pdf")
      };
    });
  }

如果仍然有相同的问题，那么图表可能会有html2canvas没有考虑到的线条。

另一种HTML栅格化插件: dom-to-html

npm i dom-to-image

import domtoimage from 'dom-to-image';
.
.
.
ConvertSvgGraph(doc){
    let self = this;
    let element = self.SVGnodes[self.index];
    if (!element) {
      self.index++;
      return;
    }
    domtoimage.toPng(element)
    .then(function (dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      img.onload = function () {
        var doc = new jsPDF();
        doc.addImage(img, 0, 0, doc.internal.pageSize.width, doc.internal.pageSize.height);
        doc.save("test.pdf")
     }
    }).catch(function (error) {
      console.error('oops, something went wrong!', error);
    });
  }