vue导出xlsx文件

最新推荐文章于 2024-06-14 10:39:01 发布

前端劝退大师

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量121

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qw_cui/article/details/134293341

版权

下载依赖
```
npm i xlsx
```
目录下创建utils文件夹

方法

import * as XLSX from "xlsx";

/**
 *导出Excel
 * @param {Object} json 服务端发过来的数据
 * @param {String} name  导出Excel文件名字
 * @param {String} titleArr  导出Excel表头
 * @param {String} sheetName 导出sheetName名字
 */
export function $exportExcel(json, name, titleArr, sheetName) {
    console.log(json);
    /* convert state to workbook */
    var data = new Array();
    var keyArray = new Array();
    const getLength = function (obj) {
        var count = 0;
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {
                count++;
            }
        }
        return count;
    };
    for (const key1 in json) {
        if (json.hasOwnProperty(key1)) {
            const element = json[key1];
            var rowDataArray = new Array();
            for (const key2 in element) {
                if (element.hasOwnProperty(key2)) {
                    const element2 = element[key2];
                    rowDataArray.push(element2);
                    if (keyArray.length < getLength(element)) {
                        keyArray.push(key2);
                    }
                }
            }
            data.push(rowDataArray);
        }
    }
    // keyArray为英文字段表头
    data.splice(0, 0, keyArray, titleArr);
    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    // 此处隐藏英文字段表头
    var wsrows = [{
        hidden: true
    }];
    ws["!rows"] = wsrows; // ws - worksheet
    XLSX.utils.book_append_sheet(wb, ws, sheetName);
    /* generate file and send to client */
    XLSX.writeFile(wb, name + ".xlsx");
}

sheetName 名字就是打开后下方的名字

引入方法

import { $exportExcel } from "@/utils/index.js";

调用

exportExcel() {
      let arr=[{id: 1,title: "测试导出",num: "1123",sex: "男"},]
      const titleArr = ["id", "标题", "数据", "性别"]; //表头中文名
      let xlsxArr = arr.map((item) => {
        return {
          id: item.id,
          title: item.title,
          num: item.num,
          sex: item.sex,
        };
      });
      $exportExcel(xlsxArr, "测试导出", titleArr, "sheetName");
},