1

我用 echarts 创建了一个图表，并希望使用 jspdf 将其包含到 pdf 中。我发现这样做的一种方法可能是使用画布，将图形传输到图像，最后将图像包含到 pdf 中。但是，我无法将图形传输到图像。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Balken</title>
    <script src="echarts.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <div id="body">
      <div id="chart"></div>
    </div>

    <!-- prepare a DOM container with width and height -->
    <div id="main" style="width: 750px; height: 500px"></div>
    <script type="text/javascript">
      // based on prepared DOM, initialize echarts instance
      var myChart = echarts.init(document.getElementById('main'));

      // specify chart configuration item and data
      var option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Salami',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
      // use configuration item and data specified to show chart
      myChart.setOption(option);

      var canvas = document.getElementById('main');
      var dataURL = canvas.toDataURL();

      //console.log(dataURL);

      $('#exportButton').click(function () {
        var pdf = new jsPDF();
        pdf.addImage(dataURL, 'JPEG', 0, 0);
        pdf.save('download.pdf');
      });
    </script>
    <button id="exportButton" type="button">Export as PDF</button>
  </body>
</html>

有什么建议么？

4

5 回答 5

4

对于商业产品，我也需要这个，所以在找到解决方案之前我没有放弃。

您不能使用图表的 ID 来获取图像的 URL，而是需要搜索画布。

($('canvas')[0]).toDataURL("image/png");

请注意“[0]”表示它将为您提供第一个画布，如果您有更多图表，请执行以下操作：

($('canvas')[0]).toDataURL("image/png");
($('canvas')[1]).toDataURL("image/png");
($('canvas')[2]).toDataURL("image/png");

3 小时的搜索和测试花费得当 :)

享受！

于 2017-09-15T16:14:49.110 回答
1

您必须导入“html2canvas”才能使这项工作。Html2canvas 库将获取快照，该图像应使用 jspdf 写入 pdf。

我为此创造了一支笔。

$("#exportButton").click(function(){   
html2canvas($("#main"), {
        onrendered: function(canvas) {
           var  dataURL=canvas.toDataURL('image/jpeg');
          var pdf = new jsPDF();
          pdf.addImage(dataURL, 'JPEG', 0, 0);
          pdf.save("download.pdf");
        }
    });
});
于 2018-07-24T09:42:40.563 回答
1

图表代码：

<ReactEcharts
            ref={(e) => {
              this.echarts_react = e;
            }}
            option={option}
            notMerge
            lazyUpdate
          />

功能：

saveAsImage = (uri, name = 'undefine.jpeg') => {
    var link = document.createElement('a');

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
  };

  saveAsPDF = (uri, name = 'undefine.pdf') => {
    let height = echartsInstance.getHeight();
    let width = echartsInstance.getWidth();
    var doc = '';
    if (width > height) {
      doc = new jsPDF('l', 'mm', [width, height]);
    } else {
      doc = new jsPDF('p', 'mm', [height, width]);
    }
    doc.addImage(echartsInstance.getDataURL({ backgroundColor: '#fff' }), 'JPEG', 10, 10);
    doc.save(name);
  };

函数调用：

<li className="nav-item inline dropdown">
              <span className="nav-link" data-toggle="dropdown">
                <i className="fa fa-download" />
              </span>
              <div className="dropdown-menu dropdown-menu-scale pull-right">
                <span
                  className="dropdown-item"
                  onClick={() =>
                    this.saveAsImage(this.echarts_react.getEchartsInstance().getDataURL({ backgroundColor: '#fff' }))
                  }>
                  Save as Image
                </span>
                <span
                  className="dropdown-item"
                  onClick={() =>
                    this.saveAsPDF(this.echarts_react.getEchartsInstance().getDataURL({ backgroundColor: '#fff' }))
                  }>
                  Save as PDF
                </span>
              </div>
            </li>
于 2019-11-05T05:57:08.157 回答
1

我会使用工具箱，另存为图像：

       ......
       工具箱： {
           特征： {
               saveAsImage：{显示：真}
           }
       }
     ......

在所有现有选项中，此选项将显示一个图标以将图形另存为图像。

Quedaria así： 在此处输入图像描述

更多工具箱选项：http ://echarts.baidu.com/echarts2/doc/option-en.html#title~toolbox

我希望它对你有帮助。

于 2017-05-10T10:07:40.283 回答
0 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta1/html2canvas.svg.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/exporting/rgbcolor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js"></script>

<script type="text/javascript">
                // $("#list1").on("click",function(){
                    $("#list1").click(function(){

            $("#row").html(option);        
            var imgData;
 var svgElements = $("#row").find('svg');

      //replace all svgs with a temp canvas
      svgElements.each(function() {
        var canvas, xml;
        // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
        $.each($(this).find('[style*=em]'), function(index, el) {
          $(this).css('font-size', getStyle(el, 'font-size'));
        });

        canvas = document.createElement("canvas");
        canvas.className = "screenShotTempCanvas";
        //convert SVG into a XML string
        xml = (new XMLSerializer()).serializeToString(this);

        // Removing the name space as IE throws an error
        xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

        //draw the SVG onto a canvas
        canvg(canvas, xml);
        $(canvas).insertAfter(this);
        //hide the SVG element
        ////this.className = "tempHide";
        $(this).attr('class', 'tempHide');
        $(this).hide();
      });


     /* html2canvas($("#row"), {
        onrendered: function(canvas) {
          var imgData = canvas.toDataURL(
            'image/png');
          var doc = new jsPDF('p', 'mm');
          doc.addImage(imgData, 'PNG', 10, 10);
          doc.save('sample-file.pdf');
        }
      });*/
  var imgData;
                   html2canvas($("#row"), {
                    useCORS: true,
                    'allowTaint': true,
                    onrendered: function (canvas) {
                        imgData = canvas.toDataURL(
                           'image/jpeg', 1.0);
                        canvaswidth1=canvas.width/2;
                        canvasheight1=canvas.height/4;

                        currentHeight = $("#row").height();
            currentHeight2=currentHeight/2;


                        var imgWidth = 200;
                      var pageHeight = 260;
                      var imgHeight = canvas.height * imgWidth / canvas.width;
                      var heightLeft = imgHeight;

                      var doc = new jsPDF('p', 'm`enter code here`m','a4');
                      var position = 35;
                      doc.setFillColor(52,73,94);
                      doc.rect(5, 5, 200, 25, "F");
                      doc.setFontSize(40);
                      doc.setTextColor(255, 255, 255);
                      doc.text(80, 23, "Fitview");
                      doc.addImage(imgData, 'JPEG', 5, position, imgWidth, imgHeight);
                      heightLeft -= pageHeight;

                      while (heightLeft >= 0) {
                        position = heightLeft - imgHeight;
                        doc.addPage();
                        doc.addImage(imgData, 'JPEG', 5, position, imgWidth, imgHeight);
                        heightLeft -= pageHeight;
                      }
                      doc.save('healthcheck_Rapportage.pdf');
                      location.reload();



                    }
                });

      $("#row").find('.screenShotTempCanvas').remove();
      $("#row").find('.tempHide').show().removeClass('tempHide');


 });

</script>
于 2019-05-17T12:12:42.587 回答