vue3实现导出报表至excel（前端主导）

一、安装xlsx库和file-saver 

npm install xlsx

 二、导出文件位置

<template>
  <div></div>
</template>
<script setup lang="ts">
import { ref} from 'vue';
import * as XLSX from 'xlsx';
import { exportOrderData } from '@/api/root/statement/leaseReport';

const formVisible = ref(false);
const exportList = ref([]); // 导出列表
const exportData = ref([]); // 导出的数据

const exportLease = async () => {
    const { data: result } = await exportOrderData({
      per_page: '0',
      order_type: '2',
    });
    exportList.value = result?.data ?? [];
    exportData.value = [];
    // 导出数据结构构造
    exportList.value.forEach((item) => {
      item.order_goods_data.forEach((key) => {
        exportData.value.push({
          order_sn: item.order_sn,
          goods_name: key.goods_name || '/',
        });
      });
    });
    // 导出表头设计
    const head = {
      order_sn: '订单号',
      goods_name: '产品名称',
    };
    // 表头数据切换
    const list = exportData.value.map((item) => {
      const obj = {};
      for (const k in item) {
        if (head[k]) {
          obj[head[k]] = item[k];
        }
      }
      return obj;
    });
    // 创建工作表
    const data = XLSX.utils.json_to_sheet(list);
    // 列宽
    const cloWidth = Array(26).fill({ wch: 20 });
    data['!cols'] = cloWidth;
    // 创建工作簿
    const wb = XLSX.utils.book_new();
    // 将工作表放入工作簿中
    XLSX.utils.book_append_sheet(wb, data, 'data');
    // 生成文件并下载
    XLSX.writeFile(wb, '购买报表.xlsx');
    setTimeout(() => {
      formVisible.value = false;
    }, 1000);
};
</script>
<style lang="less" scoped></style>