在LWC中如何使用ExcelJS

1. Exceljs是什么？

Exceljs作为开源免费功能强大的JS库，受到了广大开发人员的好评。开源地址为https://github.com/exceljs/exceljs

通过这个lib我们可以使用Javascript轻松的生成/操纵/读取Excel文件。

1.1 如何获得Exceljs文件

官方渠道没有提供现成的CDN或者直接可下载的js lib文件。根据官方文档，需要使用npm install命令来获得exceljs文件。

npm install exceljs

执行完该命令后，会在当前目录下生成node js project，所以建议先新建一个文件夹，然后命令行切换到改文件夹之后再执行此命令。

然后进入下列位置：
XXXXXX（当前文件夹名称）-> node_modules -> exceljs -> dist
拷贝出exceljs.min.js与exceljs.min.js.map文件。

新建文件夹exceljslib，并将上述两个文件放入。

压缩该文件夹为exceljslib.zip备用。

1.2 当然，如果你手懒的话我可以提供打包好的版本

点击下载（如果信任我的话）：exceljslib.zip

2. Salesforce端

2.1 将exceljslib.zip上传至static resouce：

Setup-> Custom Code->Static Resouces->New->Name:exceljs->File:exceljslib.zip

2.2 LWC中引用ExcelJS

在环境中创建LWC【TestExcelJS】，根据需要，参考下面代码，结合官方文档填充操纵excel部分代码。

import { LightningElement, api } from 'lwc';
// 加载Static Resource必须先引入loadScript
import { loadScript } from 'lightning/platformResourceLoader';
// 引入staticResource并且命名为exceljs，这里喜欢的话叫它zhangsan也可以
import exceljs from '@salesforce/resourceUrl/exceljs';

export default class TestExcelJS extends LightningElement {
    @api async download() {
        try{
            // 不加入下面两行引用exceljs会报错，具体原理以后会专门开一篇文章讲解
            var regeneratorRuntime = undefined;
            window.regeneratorRuntime = regeneratorRuntime;
            // loadScript路径规则=> / import的staticResource名 / zip包名 / 文件夹名 / js文件名
            await loadScript(this, exceljs + '/exceljslib/exceljs.min.js');
            // 创建ExcelJS实例
            const workbook = new ExcelJS.Workbook();
            // 此处参照官方文档对excel进行操作
            // ......
            // 比如添加一个sheet页
            // const sheet1 = workbook.addWorksheet("Sheet1");
            // 之后用前端页面或者后台查询的数据填充该sheet页等。

            // 下载生成的workbook
            const buffer = await workbook.xlsx.writeBuffer();
            const blob = new Blob([buffer], { type: 'application/octet-stream' });
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = 'MyData.xlsx';
            link.click();  
        } catch (error) {
            console.error(error);
        }
    }
}

在LWC的HTML中随便创建一个可点击的button

<template>
    <button onclick={download}><b>Click to Export!</b></button>
</template>

点击后，就可以得到想要的Excel文件。