别找了，这就是你看到最全的前端导出excel方案

前端GGBond
1,588 阅读5分钟

一、什么时候需要前端导出excel

1.数据量不大

来个一两万的数据量，导死你，直接浏览器导崩溃，因为开发者的电脑比一般用户的配置要高，换个普通电脑，直接寄了。

2.导出的数据格式比较简单

要是碰到什么单元格合并，多个sheet页，多种单元格格式、颜色，建议直接换后台导出。而且前端导出的代码比较复杂了，其实后端就是几行代码的事。

**放前端是为了减轻服务端压力，不然数据大用户浏览器容易卡住。**如果不满足这两条，直接让后端做导出吧，接下来讲讲主流插件。

二、主流插件

1.Export2Excel.js（xlsx）

用法：juejin.cn/post/703029…

注意：版本可能不太兼容，直接使用npm i xxx的方式会报错，然后尝试修改版本，结果成功运行。版本如下：

"file-saver": "^2.0.2",
"xlsx": "^0.16.0"

它用的就是xlsx（sheet.js）这个库，下面详细介绍一下。

Sheet.js，也叫xlsx ，官网：imgdocs.sheetjs.com

xlsx库用法：juejin.cn/post/711423…

优点

1）支持在线预览，使用 XLSX.read 读取数据imgdocs.sheetjs.com，配合table组件展示，即可实现前端预览excel。

2）兼容性好，它支持浏览器、nodejs、deno、和 react-native，浏览器兼容 ie10+。 SheetJS 社区版提供经过实战考验的开源解决方案，用于从几乎所有复杂的电子表格中提取有用的数据，并生成新的电子表格，这些新的电子表格可以与传统软件和现代软件一起使用。

3）支持设置单元格模式，如果未指定格式，则使用 ExcelGeneral 格式。格式可以指定为字符串，也可以指定为格式表的索引。文档在这里imgdocs.sheetjs.com

缺点

1）高级功能收费，如果想要修改excel表格样式的话，是需要使用收费的专业版本，但该功能可以借助 xlsx-style 实现。带着开源第一，绝不花钱的基本原则，本人就找到了ExcleJS这个库。

2）不配置会产生大量空白行，确实能导出文件，但是导出后产生了大量的空白行。导致文件比真实文件大小大10倍，这里需要用API去控制表格的总行、列数，上面的文章里也讲过【大数据导出和自定义表头名称】。

3）主要的业务逻辑比较复杂，需要单独封装使用函数。

2.excel.js（推荐）

用法：juejin.cn/post/711904…

官方文档：github.com/exceljs/exc…

优点

1）免费，不仅完全开源，还配备着中文文档这可真的是用着放心也开心！

2）功能很强大，如合并单元格、合并行和列、修改单元格的样式、设置页眉页脚、操作视图、添加公式、使用富文本等功能都是可以实现的。

缺点

1）使用exceljs导出，本地没问题，打包后报错

2）包体积比较大，26MB。（当然这也是正常的，毕竟支持的功能多）

3.js-export-excel

引入

npm install js-export-excel

or

yarn add js-export-excel

用法

// 直接导出文件
const ExportJsonExcel = require("js-export-excel");

var option = {};

option.fileName = "excel";

option.datas = [
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
    sheetName: "sheet",
    sheetFilter: ["two", "one"],
    sheetHeader: ["第一列", "第二列"],
    columnWidths: [20, 20],
  },
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
  },
];

var toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存
// 导出Blob，支持压缩等其他操作
const ExportJsonExcel = require("js-export-excel");
const JSZip = require("jszip");

var option = {};

option.fileName = "excel";

option.saveAsBlob = true;

option.datas = [
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
    sheetName: "sheet",
    sheetFilter: ["two", "one"],
    sheetHeader: ["第一列", "第二列"],
    columnWidths: [20, 20],
  },
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
  },
];

var toExcel = new ExportJsonExcel(option); //new

let file = toExcel.saveExcel();

// 压缩文件
var zip = new JSZip();

// 多个excel 依次加入(fileName不能相同)
zip.file(file.name, file);

zip.generateAsync({ type: "blob" }).then(function (content) {
  // see FileSaver.js
  saveAs(content, "example.zip"); // 下载文件
});

option

  • fileName 下载文件名(默认：download)

  • saveAsBlob 导出文件流(默认： false)

  • datas 数据

    /*多个sheet*/
/*每个sheet为一个object */
[{
sheetData:[], // 数据
sheetName:'', // sheet名字
sheetFilter:[], //列过滤
sheetHeader:[] // 第一行
columnWidths: [] //列宽 需与列顺序对应
}]

sheet option

  • sheetName sheet 名字(可有可无)(默认 sheet1)

  • sheetHeader 标题（excel 第一行数据）

    sheetHeader: ["第一列", "第二列"];

  • columnWidths 列宽 非必须

    // number 屏幕宽度为100 20即为 1/5屏幕大小
columnWidths = [20, ""];

  • sheetData 数据源(必须)

    支持超链接解析，格式为 “hyperlink:site url”。eg： hyperlink:www.baidu.com

    <!--两种形式-->
<!--第一种 object-->
[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}]
<!--第二种 arrary-->
[['一行一列','一行二列'],['二行一列','二行二列']]

  • sheetFilter 列过滤(只有在 data 为 object 下起作用)(可有可无)

    sheetFilter = ["two", "one"];

浏览器支持

ie 10+

优点

1）用法简单，主要逻辑没多少行代码，关于options的配置也很简单。

2）包体积小，就521kb

3）支持多excel文件压缩zip文件

缺点

1）社区维护频率没有前两个项目高了。

2）一些改单元格格式等等的高级功能也不支持。

4.原生JS导出csv

方法，通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下

<html>
<head>
    <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
    <button onclick='tableToExcel()'>导出</button>
</head>
<body>
    <script>
    const tableToExcel = () => {
        // 要导出的json数据
        const jsonData = [
            {
                name:'路人甲',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'炮灰乙',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'土匪丙',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'流氓丁',
                phone:'123456789',
                email:'000@123456.com'
            },
        ];
        // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `姓名,电话,邮箱
`;
        // 增加	为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
            for(const key in jsonData[i]){
                str+=`${jsonData[i][key] + '	'},`;    
            }
            str+='
';
        }
        // encodeURIComponent解决中文乱码
        const uri = 'data:text/csv;charset=utf-8,ufeff' + encodeURIComponent(str);
        // 通过创建a标签实现
        const link = document.createElement("a");
        link.href = uri;
        // 对下载的文件命名
        link.download =  "json数据表.csv";
        link.click();
    }
    </script>
</body>
</html>

上边代码复制即可用。

三、方案

插件功能拓展性包体积维护频率
Export2Excel.js（xlsx）支持设置单元格模式、样式，支持预览（高级功能收费，但可以借助 xlsx-style 实现）7.5MB上次提交5月前**（最好）**
excel.js支持合并单元格、合并行和列、修改单元格的样式、设置页眉页脚、操作视图、添加公式、使用富文本等功能**（功能最强）**25MB （最大）上次提交一年前
js-export-excel支持设置列高列宽，zip压缩。不支持改样式521KB上次提交两年前**（最差）**
原生JS导出csv仅支持csv格式**（功能最弱）**无**（最小）**无
avatar
文章
阅读
粉丝