vue中使用XLSX导出excle

一、下载依赖包

npm i xlsx --save

npm i file-saver --save

二、在需要导出excel的组件导入xlsx、file-saver

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

三、html部分

<button @click="exportExcel">下载</button>

四、js部分

exportExcel() {
      
      let wopts = {
        bookType: 'xlsx',
        bookSST: true,
        type: 'binary'
      };
      let workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
      };
      let table = [
        {
          ID: '001',
          name: '零零一',
          age: 17,
          from: '中国四川'
        },
        {
          ID: '002',
          name: '零零二',
          age: 17,
          from: '中国北京'
        },
        {
          ID: '003',
          name: '零零三',
          age: 17,
          from: '中国上海'
        },
        {
          ID: '004',
          name: '零零四',
          age: 17,
          from: '中国武汉'
        },
        {
          ID: '005',
          name: '零零五',
          age: 17,
          from: '中国湖南'
        }
        ]

      //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表，默认的列顺序由使用Object.keys的字段的第一次出现确定
      //2、将数据放入对象workBook的Sheets中等待输出
      workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);

      //3、XLSX.write() 开始编写Excel表格
      //4、changeData() 将数据处理成需要输出的格式
      FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}), new Date().getTime() + ".xlsx")
    },
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;
      } else {
        let buf = new Array(s.length);
        for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
    }

vue+elementui table导出excel

exportExcel() {
        let xlsxParam = {raw: true}; //转换成excel时，使用原始的格式
        / generate workbook object from table /
        /* 从表生成工作簿对象 */
        let wb = XLSX.utils.table_to_book(
          document.querySelector("#tableName"),  //elementui 表格的id
          xlsxParam
        );

        /* 获取二进制字符串作为输出 */
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], {type: "application/octet-stream"}),
            //设置导出文件名称
            new Date().getTime() + ".xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },