vue3导出表格

亲测有效！可直接拿去使用

因为自己的需求并不是直接给现有的表格导出，只需要自己所需要的数据导出，自己的探索，整理出来的一份，有需要的可直接使用

1、安装

vue-cli版本：3.x+

npm install xlsx -S

2、引入插件

        局部引入

import * as XLSX from 'xlsx'

3、实现

<template>
    <button @click="startExport" type="primary" >导出当前表</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import * as XLSX from 'xlsx'
    interface excelType {
	    json: object;
	    name: string;
	    titleArr: string[];
	    sheetName: string;
    }
const titleArr=['id','name','num','student','time']
const tableData=[
    {id:1,name:"小明",num:3,student:"老师",time:new Date()},
    {id:1,name:"小明",num:3,student:"老师",time:new Date()},
    {id:1,name:"小明",num:3,student:"老师",time:new Date()}
]
const startExport = () => {
    exportExcel({
        json: tableData,//数据
        name: '考试计划表',//表名
        titleArr: titleArr,//表头
        sheetName: 'sheet',//页签
    })
}

const exportExcel = (params: excelType) => {
	const keyArray = [];
    let data = [];
	const getLength = function (obj: object) {
		let count = 0;
		for (const i in obj) {
			if (Object.prototype.hasOwnProperty.call(obj, i)) {
				count++;
			}
		}
		return count;
	};

	
    for (const key1 in params.json) {
      if (Object.prototype.hasOwnProperty.call(params.json, key1)) {
        const element = (params.json as { [key: string]: object })[key1];
        const rowDataArray = [];
        for (const key2 in element) {
          if (Object.prototype.hasOwnProperty.call(element, key2)) {
            const element2 = (element as { [key: string]: object })[key2];
            rowDataArray.push(element2);
            if (keyArray.length < getLength(element)) {
              keyArray.push(key2);
            }
          }
        }
        data.push(rowDataArray);
      }
    }
    data.splice(0, 0, keyArray as any, params.titleArr as any);
    console.log(data);
    let ws = XLSX.utils.aoa_to_sheet(data);
    let wb = XLSX.utils.book_new();
	// 隐藏英文字段表头
    const wsrows = [{ hidden: true }];
      /* 设置worksheet每列的最大宽度 */
      const colWidth = data.map((row) =>
        row.map((val) => {
          /* 先判断是否为null/undefined */
          if (val == null) {
            return {
              wch: 20,
            };
          } else if (val.toString().charCodeAt(0) > 255) {
            /* 再判断是否为中文 */
            return {
              wch: val.toString().length * 2,
            };
          } else {
            return {
              wch: val.toString().length*2,
            };
          }
        })
      );
      /* 以第一行为初始值 */
      const 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;
      ws['!rows'] = wsrows; // ws - worksheet
      XLSX.utils.book_append_sheet(wb, ws, params.sheetName);
	/* generate file and send to client */
	XLSX.writeFile(wb, `${params.name}.xlsx`);
};