正文

轻松学会echarts图表导出PDF：5分钟内掌握导出技巧，提升数据展示效果

/0 浏览量
0829

在当今这个数据可视化的时代，echarts作为一款强大的图表库，已经成为众多开发者和数据分析师的得力助手。而将echarts图表导出为PDF格式，不仅可以方便地分享和保存，还能提升数据展示的专业性和美观度。下面，就让我带你轻松学会echarts图表导出PDF的技巧，让你在5分钟内掌握这一技能。

一、准备工作

在开始导出echarts图表之前，请确保你已经：

  1. 引入了echarts库。
  2. 创建了一个echarts实例。
  3. 设置了图表的配置项和数据。

二、导出PDF的基本原理

echarts图表导出PDF的核心原理是通过echarts内置的getDom方法获取图表的DOM元素，然后利用html2canvas将DOM元素转换为Canvas元素，最后通过html2canvas提供的toDataURL方法将Canvas元素转换为Base64格式的图片，最后将图片导出为PDF。

三、导出PDF的步骤

1. 引入相关库

首先，确保你的项目中已经引入了echarts和html2canvas库。以下是引入方式的示例代码：

// 引入echarts
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 引入html2canvas
var html2canvas = require('html2canvas');

2. 创建echarts实例

创建一个echarts实例，并设置图表的配置项和数据：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

3. 导出PDF

在echarts实例创建完毕后，可以使用以下方法导出图表为PDF：

// 导出PDF
function exportPDF() {
    html2canvas(document.getElementById('main')).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;

        // 未生成pdf的html页面的高度
        var leftHeight = contentHeight;

        // 页面的个数
        var leftPageCount = Math.ceil(leftHeight / pageHeight);

        var number=1;
        var pdf = new jsPDF('', 'pt', 'a4');

        // 有多个页面时
        for(var i = 0; i < leftPageCount; i++) {
            // container 可以是div或canvas，根据你将canvas转成的图片方式。
            var ting = contentWidth;
            var h = pageHeight;

            // 内页
            if(i < leftPageCount - 1) {
                ting = contentWidth;
                h = pageHeight;
            } else {
                ting = contentWidth * (leftHeight % pageHeight) / leftHeight;
                h = pageHeight;
            }

            var canvasContent = canvas.cloneNode(true);
            canvasContent.style.width = ting + 'pt';
            canvasContent.style.height = h + 'pt';
            pdf.addImage(canvasContent.toDataURL('image/jpeg', 1.0), 'JPEG', 40, 40, ting, h);

            pdf.addPage();
        }

        pdf.save('echarts_chart.pdf');
    });
}

// 调用导出PDF函数
exportPDF();

4. 测试导出效果

将以上代码整合到你的项目中，并运行页面。点击导出PDF按钮，即可看到生成的PDF文件。

四、总结

通过以上步骤，你可以在5分钟内轻松学会echarts图表导出PDF的技巧。希望这篇文章能帮助你提升数据展示效果，让你的数据可视化作品更具吸引力。

-- 展开阅读全文 --