前端实现 vue导出Excel

www_win

已于 2023-03-30 13:07:46 修改

阅读量167

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-30 13:05:13 首次发布

本文链接：https://blog.csdn.net/www_win/article/details/129853858

版权

使用步骤

1.安装插件

npm install xlsx

2.在需要的文件内引入或者在main.js内全局引入

import * as XLSX from 'xlsx';

3.代码如下（示例）：

html部分

<t-popconfirm content="确认导出吗" @confirm="onExportClick">
  <t-button
   variant="base"
   theme="primary"
   class="buttonList"
   > 导出
  </t-button>
</t-popconfirm>

导出步骤

const onExportClick = () => {
  exportOperation(searchFormData.value.beginTime, searchFormData.value.endTime)
    .then((res) => {
      //res接口返回的数据
      handleExport(res);
    })
    .catch((err) => {
      loadingFull.value = false;
      MessagePlugin.warning('导出失败' + JSON.stringify(err));
    });
};

const handleExport = (res) => {
  let exportData = [];
  //导出数据结构构造
  res.forEach((item, index) => {
    exportData.push({
      sort: index + 1,
      operationDetail: item.operationDetail ? item.operationDetail : '',
      operationTime: item.operationTime ? item.operationTime : '',
      operator: item.operator ? item.operator : '',
    });
  });
  //表头设计
  let head = {
    sort: '序号',
    operationDetail: '操作内容',
    operationTime: '操作时间',
    operator: '操作人',
  };
  //表头数据切换
  const list = exportData.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 wb = XLSX.utils.book_new();
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, 'data');
  // 生成文件并下载
  XLSX.writeFile(wb, '文件.xlsx');
  MessagePlugin.success('导出成功');
};