vue3导出表格(导出成Execl表)

前言:该封装方法适用于后端返回的数据是文档流的时候

1.在utils文件夹中新建exportExecl.js用于封装方法

javascript 复制代码
export const exportExecl = (fn, name, data = {}) => {
    fn(data).then((res) => {
      const content = res;
      const blob = new Blob([content]);
      const fileName = name;
      if ("download" in document.createElement("a")) {
        // 非IE下载
        const elink = document.createElement("a"); // 创建一个a标签
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName);
      }
    });
  };

2.在请求的接口是中添加请求类型(responseType: 'arraybuffer')和请求头(headers)

javascript 复制代码
// 服务项列表的导出
export function serviceItemExport(query) {
  return request({
    url: '/hct-oms/serviceItem/export',
    method: 'get',
    params: query,
    responseType: 'arraybuffer', // 文档流类型
    headers:{ // 请求头
      'Content-Type':'application/x-www-form-urlencoded'
    }
  })
}

3.使用

javascript 复制代码
<el-button type="primary" @click="exportService">导出</el-button>

import { exportExecl } from '@/utils/exportExecl';
import {
  serviceItemExport, // 服务项列表的导出
} from '@/api/serviceItemList/index';
// 导出

const exportService = () => {
  const data = {ids:datas.ids};
  exportExecl(serviceItemExport, '服务项表.xlsx', data);
};
// 参数1:是请求的接口,后端会返回文档流;参数2:导出的文件名称,自己随便定义;参数3:接口需要传递的数据
相关推荐
程序员爱钓鱼1 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel8 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着8 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_12 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark13 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js