Vue使用xlsx.js在前端导出Excel表格

Summer不秃

已于 2023-11-21 21:30:10 修改

阅读量137

点赞数

文章标签：前端 javascript vue.js 开发语言

于 2023-11-21 21:29:27 首次发布

本文链接：https://blog.csdn.net/z001126/article/details/134541195

版权

今天给大家分享一下，如何在前端导出Excel表格

效果图如下：

具体实现如下：

HTML代码：

<button  @click="exportFile" :loading="loading">
    导出收货地址
</button>

Script代码：

import { read, utils, writeFileXLSX } from 'xlsx';
<script setup>

const loading = ref<boolean>(false);

const exportFile = async () => {
  loading.value = true
  let excelData = [
    ["说明：\n1. 仅支持导出需要发货商品信息；\n2. 订单编号相同则表明为同一订单"],
    ['订单编号', '商品名称', '订单状态', '交易时间', '收货人', '手机号', '省', '市', '区', '详细地址']
  ]

    let data = [
    {
        "2023091114471160970",
        "需要发货",
        "pendingShipment",
        "1694414831531",
        "哈哈哈啊",
        "15353327494",
        "浙江省",
        "杭州市",
        "滨江区",
        "长河路阿里园区BXX软件公司32楼"
        }
    ]

  excelData = excelData.concat(data);

  const wb = utils.book_new();
  const worksheet = utils.aoa_to_sheet(excelData);
  const mergeCellRange = { s: { r: 0, c: 0 }, e: { r: 0, c: 9 } };
  worksheet['!merges'] = [mergeCellRange];
  worksheet['!rows'] = []

  for (let i = 0; i < 1; i++) {
    worksheet['!rows'][i] = { hpx: 40 };
  }

  worksheet['!cols'] = []

  for (let i = 0; i < 10; i++) {
    worksheet['!cols'][i] = { wpx: 140 };
  }

  utils.book_append_sheet(wb, worksheet, 'Sheet 1');

  try {
    writeFileXLSX(wb, `商城收货地址${formatTime(Date.now(), 'YYYYMMDDHHmmss')}.xlsx`);
  } catch(err) {
    message.error('导出失败')
  }

  loading.value = false
}
</script>