vue3 excel 文件导出

//文件导出 在index.ts 中

export function downloadHandle(url: string,params?:object, filename?: string, method: string = 'GET'){

try {

downloadLoadingInstance = ElLoading.service({

text: "正在生成下载数据,请稍候",

background: "rgba(0, 0, 0, 0.7)",

});

return service.get(url, {

responseType: 'blob',

params:params?params:''

}).then(async (resp: any) => {

// 创建a标签

const down = document.createElement('a')

// 文件名没传,则使用时间戳

if (filename) {

down.download = filename

} else {

const downName = resp.headers'content-disposition'.split('=')1

down.download = decodeURI(downName)

}

// 隐藏a标签

down.style.display = 'none'

// 创建下载url

down.href = URL.createObjectURL(

new Blob(resp.data, {

type: resp.data.type

})

)

// 模拟点击下载

document.body.appendChild(down)

down.click()

// 释放URL

URL.revokeObjectURL(down.href)

// 下载完成移除

document.body.removeChild(down)

downloadLoadingInstance.close();

}).catch((r: any) => {

console.error(r);

ElMessage.error('下载文件出现错误,请联系管理员!');

downloadLoadingInstance.close();

});

} catch (err: any) {

ElMessage.error(err.message)

}

}

在页面中 引入

import {downloadHandle} from "../../api/index";

const downloadFun = () => {

downloadHandle("/bg/customer/accountQuantity/exportExcelTemplate");

};

相关推荐
倾颜26 分钟前
AI Mind 的单线程短期记忆设计:如何压缩、整理并控制当前会话上下文
前端·langchain·llm
u0143781081 小时前
行内块元素之间的空白
前端·html
Lsx_1 小时前
基于 Claude Code 的 AI 编程工作流探索
前端·ai编程·claude
yingyima1 小时前
Nginx 配置速查手册:核心语法与实战案例
前端
梨子同志1 小时前
开发工具
前端·后端
像我这样帅的人丶你还1 小时前
Java 后端详解(六):Maven 与本地开发指南
前端·后端
触底反弹1 小时前
🎲 纯 CSS 搞定 3D 旋转立方体?还附赠一个「天坑」解决方案!
前端·css·html
盗德1 小时前
LangChain.js 中文开发手册(记录)
前端
༄沐࿆风࿆࿆2 小时前
JavaScript函数完全指南:从基础语法到闭包原理与应用实战
开发语言·javascript
Geek-Chow2 小时前
微服务认证与授权:01 — 概念
java·前端·数据库