[JavaScript知识库] 前端Vue生成并导出表格(多种格式)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端Vue生成并导出表格(多种格式) -> 正文阅读

[JavaScript知识库]前端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>