Echarts 导出为PDF格式 jquery

JKPurpleV

于 2024-08-08 14:52:29 发布

阅读量145

点赞数 2

文章标签： echarts pdf jquery

本文链接：https://blog.csdn.net/JKPurpleV/article/details/141026934

版权

导出为pdf格式的时候，无法下载

①Echart div，导出的也是这个部分

<div id="chart" style="width: 100%;height:90%;"></div>

②引用jsPDF.js和html2canvas.js

<script src="/js/echarts-5.4.2/echarts.js" type="text/javascript"></script>
<script src="/js/jsPDF-2.5.1/jspdf.umd.min.js"></script>
<script src="/js/html2canvas/html2canvas.min.js"></script>

③导出pdf


    form.on('submit(data-export-btn)', function (data) {
        html2canvas(document.getElementById('property_chart')).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            const pdf = new window.jspdf.jsPDF({
                orientation: 'l',
                unit: 'px',
                format: [canvas.width, canvas.height]
            });
            pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
            pdf.save(equipment+'温度历史（'+start_dayTime+"至"+end_dayTime+"）"+'.pdf');
        });
        return false;
    });

注意：

错误的代码为：const pdf = new jsPDF({

正确的代码为：const pdf = new window.jspdf.jsPDF({

错误的代码无法呼起下载功能