file-saver & xlsx 导出 excel

这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

前言

我们常常使用后端作为文件下载的方式，但是后端导出excel文件比较麻烦往往需要先做模板，才能正确导出数据，那么有没有办法不依赖后端，纯前端将表格数据导出为excel文件呢？

答案是肯定的，这里需要用到两个库 :

• xlsx: xlsx可以从几乎所有复杂的电子表格中提取有用的数据，并生成新的电子表格，这些新的电子表格可以与传统和现代软件一起使用。这是一个经过了实战考验的开源解决方案，
• file-saver ：FileSaver.js 是客户端保存文件的解决方案，对于在客户端生成文件的 web 应用程序来说使用file-saver可简化很多开发步骤。

解决

利用这两个库可以很轻松的将数据生成excel文件并在客户端中导出。

代码：

import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

changeData(s) {
    // 如果存在ArrayBuffer对象(es6) 最好采用该对象
    if (typeof ArrayBuffer !== 'undefined') {
        // 1、创建一个字节长度为s.length的内存区域
        let buf = new ArrayBuffer(s.length);

        // 2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
        let view = new Uint8Array(buf);

        // 3、返回指定位置的字符的Unicode编码
        for (let i = 0; i !== s.length; ++i) {
            view[i] = s.charCodeAt(i) & 0xff;
        }
        return buf;
    }
    let buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) {
        buf[i] = s.charCodeAt(i) & 0xff;
    }
    return buf;
},

exportExcel() {
        if (this.tablePosition.length < 1) {
            this.$message.warning('没有要导出的数据');
            return;
        }
        let wopts = {
            bookType: 'xlsx',
            bookSST: true,
            type: 'binary',
        };
        let workBook = {
            SheetNames: ['Sheet1'],
            Sheets: {},
            Props: {},
        };
        let table = [];
        for (let i = 0; i < this.tablePosition.length; i++) {
            let params = {
                任职时间: this.tablePosition[i].startTime,
                免职时间: this.tablePosition[i].endTime,
                单位部门: this.tablePosition[i].employer,
                职务: this.tablePosition[i].positions,
                批准文电号: this.tablePosition[i].approveNum,
            };
            table[i] = params;
        }

        workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);

        FileSaver.saveAs(
            new Blob([this.changeData(XLSX.write(workBook, wopts))], {
                type: 'application/octet-stream',
            }),
            '干部职务变动登记表.xlsx',
        );
    }

说明：

• XLSX.utils.json_to_sheet() 接收一个数组，并将其转为excel数据流
• FileSaver.saveAs 将Blob对象保存为文件

拓展

FileSaver 提供了多种保存文件的方式。

将文本保存为文件

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

保存图片

如果在浏览器中直接点击图片类型的文件时，浏览器默认是预览图片，如果需要下载，需要做特殊处理，那么使用 FileSaver 的话就可以很方便的下载在线图片了，用法如下：

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");