这个你真的用不到吗？echarts图表导出jpeg/png/PDF格式

我正在参加「掘金·启航计划
我们在项目中用echarts图表展示数据，业务需求在把echarts图表导出为图片(jpeg/png),大家都知道报表工具一般都有导出和打印的功能。他们不仅可以在页面上显示图形，还可以导出为WORD、PDF等文件来完善网格，或者直接打印出来参考。所以集成的Echarts图形也可以像报表工具本身的那些漂亮图形一样导出打印出来。

1. 使用echarts自带的工具

　　echarts工具栏组件中有自带的图片下载功能，我们只需要在option中进行相关配置，就可以默认在右上角生成一个下载图标，进行下载。
相关配置如下：

toolbox: {
show: true,
feature: {
saveAsImage: { 
show: true,// 保存图表
excludeComponents: ['toolbox'],
pixelRatio: 2 
} }}

2.自定义按钮下载

 //导出图片
        Export() {
            let myChart =null
                myChart = this.$refs.aiAlarmDom.circleChart
            var img = new Image();
            img.src = myChart.getDataURL({
                type: "png",
                pixelRatio: 1, //放大2倍
                backgroundColor: "#fff"
            });

            img.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL("image/png");

                var a = document.createElement("a");
                // 创建一个单击事件
                var event = new MouseEvent("click");
                // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                a.download = "图片.png" || "下载图片名称";
                // 将生成的URL设置为a.href属性
                a.href = dataURL;
                // 触发a的单击事件
                a.dispatchEvent(event);
            };
        }

1. 这里的this.myChart是vue中的写法，可以在初始化echarts实例时将其保存起来
2. 关于getDataURL的介绍，参考官方文档Api介绍

3.把echarts在内的DOM导出PDF格式

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

export const downloadPDF = (page, name) => {
    html2canvas(page).then(function (canvas) {
        console.log('canvas666666', canvas)
        canvas2PDF(canvas, name);
    });
};
const canvas2PDF = (canvas, name) => {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 595.28;
    let imgHeight = 592.28 / contentWidth * contentHeight; // 第一个参数： l：横向  p：纵向
    // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
    let pdf = new jsPDF("p", "pt");
    pdf.addImage(
        canvas.toDataURL("image/jpeg", 1.0),
        "JPEG",
        0,
        0,
        imgWidth,
        imgHeight
    );
    pdf.save(name + ".pdf");
};

页面中使用

import { downloadPDF } from "../../htmlToPdf"; //工具方法，导出操作
downloadPDF(this.$refs.card3, this.name3);