vue项目:使用xlsx导出Excel数据

文章目录


一、安装xlsx

执行命令:npm i xlsx file-saver --save

二、报错及解决

使用时:import XLSX from "xlsx"; 发现如下报错信息

报错原因:xlsx版本不兼容。

解决也很简单:

1)先移除已安装的xlsx: npm uninstall xlsx

2)安装低版本:npm i xlsx@0.17.0

三、编写公共方法

javascript 复制代码
// exportExcel.js
import { saveAs } from "file-saver";
import XLSX from "xlsx";

function datenum(v, date1904) {
  if (date1904) v += 1462;
  const epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data) {
  let ws = {};
  let range = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  };
  for (let R = 0; R != data.length; ++R) {
    for (let C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      let cell = {
        v: data[R][C]
      };
      if (cell.v == null) continue;
      const cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R
      });
      if (typeof cell.v === "number") cell.t = "n";
      else if (typeof cell.v === "boolean") cell.t = "b";
      else if (cell.v instanceof Date) {
        cell.t = "n";
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = "s";
      ws[cell_ref] = cell;
    }
  }
  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
  return ws;
}

function s2ab(s) {
  let buf = new ArrayBuffer(s.length);
  let view = new Uint8Array(buf);
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

/**
 * @description 导出表格数据
 * @param {Array} header 表头
 * @param {Array} data 数据
 * @param {String} filename 文件名
 * @param {merges} header 表头
 * @param {autoWidth} header 是否自适应表格内容宽度
 * @param {bookType} header excel文件后缀名
 */
export function exportJson2Excel({
  header = [],
  data = [],
  filename = "excel",
  merges = [],
  autoWidth = true,
  bookType = "xlsx"
} = {}) {
  let dataKeys = [];
  // 处理xlsx头部
  header = header.map(item => {
    dataKeys.push(item.key);
    return item.value;
  });
  // 处理data数据
  data = data.map(item => {
    const dataOne = dataKeys.map(key => item[key]);
    return [...dataOne];
  });
  header.length > 0 && data.unshift(header);
  let ws = sheet_from_array_of_arrays(data);
  if (merges.length > 0) {
    if (!ws["!merges"]) ws["!merges"] = [];
    merges.forEach(item => {
      ws["!merges"].push(XLSX.utils.decode_range(item));
    });
  }
  if (autoWidth) {
    // 设置worksheet每列的最大宽度
    const colWidth = data.map(row =>
      row.map(val => {
        // 先判断是否为null、undefined
        if (val == null) {
          return {
            wch: 10
          };
        } else if (val.toString().charCodeAt(0) > 255) {
          // 判断是否为中文
          return {
            wch: val.toString().length * 2
          };
        } else {
          return {
            wch: val.toString().length
          };
        }
      })
    );
    // 以第一行为初始值
    let result = colWidth[0];
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]["wch"] < colWidth[i][j]["wch"]) {
          result[j]["wch"] = colWidth[i][j]["wch"];
        }
      }
    }
    ws["!cols"] = result;
  }
  const ws_name = "SheetJS";
  const wb = new Workbook();
  // 将工作表添加到工作簿
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;
  const wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: "binary"
  });
  saveAs(
    new Blob([s2ab(wbout)], {
      type: "application/octet-stream"
    }),
    `${filename}.${bookType}`
  );
}

四、方法使用

javascript 复制代码
<template>
  <div class="hello">
    <el-button type="primary" @click="handleExport">导出为Excel</el-button>
    <el-table :data="tableData" border>
      <el-table-column
        v-for="item in header"
        :key="item.key"
        :label="item.value"
        :prop="item.key"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { exportJson2Excel } from "../utils/exportExcel.js";

export default {
  data() {
    return {
      message: "",
      header: [
        {
          key: "id",
          value: "ID"
        },
        {
          key: "title",
          value: "名称"
        },
        {
          key: "tag",
          value: "标签"
        },
        {
          key: "typeText",
          value: "方式"
        },
        {
          key: "cycle",
          value: "周期"
        },
        {
          key: "status",
          value: "状态"
        }
      ],
      tableData: [
        {
          id: 44,
          title: "test111122222",
          tag: "",
          typeText: "定时任务",
          cycle: "每天 9:00",
          status: "草稿"
        },
        {
          id: 45,
          title:
            "名称很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长",
          tag: "hhh",
          typeText: "定时任务",
          cycle: "每天 12:00",
          status: "草稿"
        },
        {
          id: 45,
          title: "测试测试测试",
          tag: "hhh",
          typeText: "定时任务",
          cycle: "每天 00:00",
          status: "草稿"
        },
        {
          id: 47,
          title: "嗯嗯嗯",
          tag: "hhh",
          typeText: "定时任务",
          cycle: "每天 10:00",
          status: "草稿"
        },
        {
          id: 48,
          title: "test",
          tag: "null",
          typeText: "循环任务",
          cycle: "每天 19:00",
          status: "正式"
        }
      ]
    };
  },
  methods: {
    handleExport() {
      console.log("export");
      exportJson2Excel({
        data: this.tableData,
        header: this.header
      });
    }
};
</script>

页面页面展示,及导出结果:

相关推荐
神奇夜光杯几秒前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
EricWang135814 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning14 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人24 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
小c君tt1 小时前
MFC中Excel的导入以及使用步骤
c++·excel·mfc
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf