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");

};

相关推荐
小oo呆6 分钟前
【学习心得】Python的Pydantic(简介)
前端·javascript·python
funnycoffee12314 分钟前
F5 Big IP如何设置web和SSH登录的白名单
前端·tcp/ip·ssh
JarvanMo22 分钟前
国产 App,求你放过我的 iPhone 电量吧!
前端
先飞的笨鸟25 分钟前
2026 年 Expo + React Native 项目接入微信分享完整指南
前端·ios·app
angelQ27 分钟前
Vercel部署:前后端分离项目的整体部署流程及问题排查
前端·javascript
AI前端老薛27 分钟前
CSS实现动画的几种方式
前端·css
晨米酱29 分钟前
轻量级 Git Hooks 管理工具 Husky
前端·代码规范
Jing_Rainbow30 分钟前
【 前端三剑客-35 /Lesson58(2025-12-08)】JavaScript 原型继承与对象创建机制详解🧬
前端·javascript·面试
携欢31 分钟前
portswigger靶场之修改序列化数据类型通关秘籍
android·前端·网络·安全
前端小L32 分钟前
专题二:核心机制 —— reactive 与 effect
javascript·源码·vue3