如何从 ApexCharts 获取 URI 以下载 PDF？

Question

我已经实现了 ApexCharts 并希望将其输出到 PDF 文档中。

我尝试从 获取下载 URI chart.dataURI，但失败并出现错误：

Chart.dataURI 不是函数

下面是 Apex 条形图的创建以及我对下载 URI 的尝试，但它无法获取：

var options = {
  chart: {
    height: 450,
    type: 'bar',
    width: 1000,
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '40%',
      endingShape: 'rounded'
    },
  },
  dataLabels: {
    enabled: false
  },
  colors: ['#008000', '#d4a823', '#f92525'],
  stroke: {
    show: true,
    width: 2,
    colors: ['transparent']
  },
  series: [{
    name: 'Good',
    data: JSON.stringify(graph_data.good)
  }, {
    name: 'Okey',
    data: JSON.stringify(graph_data.ok)
  }, {
    name: 'Bad',
    data: JSON.stringify(graph_data.bad)
  }],
  xaxis: {
    categories: graph_data.month,
  },
  yaxis: {
    title: {
      text: 'Smiley Percentage'
    }
  },
  fill: {
    opacity: 1

  },
  tooltip: {
    y: {
      formatter: function(val) {
        return val + " Smileys"
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector("#monthlyhistory"), options);
var dataURL = chart.dataURI().then((uri) => {  // Here shows an error
  console.log(uri);
  var pdf = new jsPDF();
  pdf.addImage(uri, 'PNG', 0, 0);
  pdf.save("download.pdf");
})}

我希望以 PDF 格式输出，但它不起作用。

Answer 1

下面是一个包含一些附加代码的解决方案，可帮助我们渲染图表以很好地适应 pdf 文件的框架。我之前的尝试确实渲染了图表，但图表的侧面和底部没有填充令人讨厌的白色不均匀边框的页面。

“图表”参考基于获取当前图表渲染后的实际实例......

不要忘记在网页的标题部分加载 jsPDF 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

我从渲染图表的 div 元素上方导航栏上的按钮调用下面的函数。请注意，我将 div 元素称为“chartCanvas”，但它实际上并不是一个 canvas 元素，它只是一个带有我自己的类参数的 div。

function downloadChartToPdf() {
    if (chart) {
        var canvas = document.getElementById("chartCanvas");
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;
        console.log(width); // testing only...
        console.log(height); // testing only...
        // ----- Not currently in use... -----
        //var rect = canvas.getBoundingClientRect();
        //console.log(rect.width); // testing only...
        //console.log(rect.height); // testing only...
        // -------------------------------------------

        chart.dataURI().then(({ imgURI, blob }) => {
            //set the orientation
            if (width > height) {
                console.log("landscape"); // testing only...
                let pdf = new jsPDF('l', 'px', [width, height]);
                pdf.backgroundColor = '#BFBFBF';
                //then we get the dimensions from the 'pdf' file itself
                width = pdf.internal.pageSize.getWidth();
                height = pdf.internal.pageSize.getHeight();
                widthWithPadding = width - 20;
                heightWithPadding = height - 20;
                pdf.addImage(imgURI, 'PNG', 10, 10, widthWithPadding, heightWithPadding);
                pdf.save("chart.pdf");
            }
            else {
                console.log("portrait"); // testing only...
                let pdf = new jsPDF('p', 'px', [height, width]);
                pdf.backgroundColor = '#BFBFBF';
                //then we get the dimensions from the 'pdf' file itself
                width = pdf.internal.pageSize.getWidth();
                height = pdf.internal.pageSize.getHeight();
                widthWithPadding = width - 20;
                heightWithPadding = height - 20;
                pdf.addImage(imgURI, 'PNG', 10, 10, widthWithPadding, heightWithPadding);
                pdf.save("chart.pdf");
            }
        })
    }
}

导出的PDF结果：