前端Vue生成并导出表格(多种格式)

使用npm包“xlsx”进行vue框架下表格的生成和导出

使用第三方包

https://www.npmjs.com/package/xlsx

支持导出格式

● xlsx
● xlsb
● xlsm
● xls
● xml
● csv
● txt
● ods
● fods
● uos
● sylk
● dif
● dbf
● prn
● qpw
● 123
● wb*
● wq*
● html
● htm

安装

npm install xlsx

使用demo

<template>
  <div class="demo">
    <qz-icon
       class="icon-download"
       @click="downloadIpList"
    ></qz-icon>
  </div>
</template>

<script>
import XLSX from "xlsx";
export default {
  methods: {
    // 下载IP列表
    downloadIpList() {
			ipList=["192.168.0.1","192.168.0.2"];
      //设置表头
      let aoa = [["ip"]];
      //按二维数组顺序加入表格数据
      ipList.forEach((ip) => {
        aoa.push([ip]);
      });
      //创建表
      let worksheet = XLSX.utils.aoa_to_sheet(aoa);
      //创建表格文件
      let workbook = XLSX.utils.book_new();
      //插入表到表格第一页
      XLSX.utils.book_append_sheet(workbook, worksheet, "第一页");
      XLSX.writeFile(workbook, " IP列表.csv");//导出表格
    },
  },
};
</script>

效果