Angular实现带图片(echarts)的excel下载

前言

1. 公司项目需要将数据导出成excel，同时还要附带echarts生成的图表，在大佬的指点下实现了，这一需求，感谢那些帮助过我的人！
2. 在这之前：我假设你使用的angular开发，图表使用的是echart。
3. 展示的代码仅供参考，具体要以你实际项目需求为准，因为我并不能将我所有代码全部贴出来。
4. 如果文中有什么错误的地方还请批评指正

插入一些报错解决

1. 如果出现一堆的fs，zlib之类的；

试试在tsconfig.json 文件中引入这个：

2. StaticInjectorError

试试在对应的module.ts中的provider中声明

成果展示

ps:我的马赛克跟没打一样。

正文

一、环境介绍

开发环境

• 操作系统 windows
• 框架：Angular7
• IDE：vsCode

关键依赖库

• stream@0.0.2
• file-saver@^2.0.5
• exceljs@^1.6.2

二、实现步骤

1. npm 安装三个依赖

npm i stream@0.0.2

npm i file-saver@^2.0.5

npm i exceljs@^1.6.2

2.准备一个excel.service.ts 文件

这个文件可以放在自己的一个SharedModul，用它向外提供服务。
文件内容：

import { Injectable } from '@angular/core';
import { Workbook } from 'exceljs';
import * as fs from 'file-saver';
@Injectable()
export class ExcelService {
    constructor(
    ) { }
    /* 位置： start
     * 描述：趋势分析图-total-折线图下载方法
     */
    public exportExcelTrendThorwLine(selfData: any): void {
        let that = this;
        const name = selfData.title;
        const header = selfData.headrList;
        const data = selfData.dataList;
        // Create workbook and worksheet
        let workbook = new Workbook();
        let worksheet = workbook.addWorksheet('良率');
        // Image
        let lineImage = workbook.addImage({
            base64: selfData.imageBase64,
            extension: 'png',
        });
        worksheet.addImage(lineImage, "A1:K15");
        worksheet.mergeCells('A1:K15');
        let headerRow = worksheet.addRow(header);
        //设置样式
        headerRow.eachCell((cell, number) => {
            that.setCellStyleLight(cell, 'thin', false);
        })
        this.generateExcel(workbook, name);
    }
    /* 位置： end
     * 描述：趋势分析图-total-折线图下载方法
     */
    /**
     * 原始基本方法/函數 start
     * 
     */
    //Generate Excel File with given name 產生excel
    private generateExcel(workbook: Workbook, fileName: string): void {
        workbook.xlsx.writeBuffer().then((data: ArrayBuffer) => {
            try {
                // let blob = new Blob();
                let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

                fs.saveAs(blob, fileName + "_" + new Date().getTime() + ".xlsx");
            } catch (error) {
                console.log(error)
            }
        })
    }
    private setCellStyleLight(cell, borderStyle: string = 'thin', fill: boolean = true) {
        cell.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
        cell.border = { top: { style: borderStyle }, left: { style: borderStyle }, bottom: { style: borderStyle }, right: { style: borderStyle } };
        if (fill)
            cell.fill = {
                type: 'pattern',
                pattern: 'solid',
                fgColor: { argb: 'FFDCE6F1' },
                bgColor: { argb: 'FFFFFF00' }
            };
    }

    /**
     * 原始基本方法/函數 end
     * 
     */
}

简单的说明下这个文件：

• Workbook 这个的更多用法可以自己去百度查，很丰富。
• workbook.addImage() 就是下载图片的关键。(图表生成图片后面说)
• generateExcel() 统一封装的下载，触发这个方法，即浏览器开始下载excel，这段方法可以直接copy，通用的。
• let worksheet = workbook.addWorksheet(‘良率’) 表明可以添加多个sheet
• worksheet.addRow(header) 可以按照行来添加数据，遗憾的是我没有找到能添加列的。所以，如果你的数据复杂的话，尽量将他封装成一行行的数组，内容不够的可以用空字符串来填充，最后，合并单元格(mergeCells),慢慢调试会达到你想要的效果。

3. 准备一个专门用于处理组件数据的 service，为excelSerivce提供数据

TrendPage.service.ts
这里代码量太大就不贴代码了。

这个文件的这个函数专门用于处理组件中的数据，从而将处理好的数据给excelService,这样excelService只负责“摆位置”。
到目前为止：我们一直是在处理数据。
这个文件中，这个是我们echart图表数据生成的图片，关键在于echart给我们提供了getDataURL()接口。所以我们能将图表数据导出成base64的图片。
但是在这之前，我们需要有这个echart的实例化对象。

 imageBase64: dataObj.echartInstance.getDataURL({ backgroundColor: "#15354a" }),

4. 在对应的component(trend-page.component.ts)文件中获取echarts的实例化对象

相信很多同学在angular中使用echart都是封装到一个组件去使用的。至少我是这样的。
我的调用关系如图


可以看到 在

<app-yield-throw-line-echart #vc_yield_throw_line_obj [mergeData]='yieldThrowLineMergeData'
            (changeMyHiddenEmitter)='changeHiddenEmitter($event)'></app-yield-throw-line-echart>

中 有 #vc_yield_throw_line_obj，我就是通过这个来获取echart的实例化对象的。
让我们来看看我的 app-yield-throw 的两个文件都有什么，我标红为重点。
html文件

ts文件

我的trend-page.component.ts 中关键的两个地方

通过@viewChild 拿到 app-yield-throw-line-echart 这个dom的实例，

通过 vc_yield_throw_line_obj 拿到echart的实例从而向trend-page.service.ts 传递。再依次向下传递到最终的
imageBase64位置，从而试下excel中带图片。

三、结果呈现

excel再文章开头有，就不再贴了。如果有问题，可以在最近还能记得这个项目的细节问我，如果时间长了，估计我自己都需要看会了。

---

加油自己！