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

};

相关推荐
Alice-YUE35 分钟前
【js高频八股】防抖与节流
开发语言·前端·javascript·笔记·学习·ecmascript
是上好佳佳佳呀2 小时前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记
莎士比亚的文学花园2 小时前
Linux驱动开发(3)——设备树
开发语言·javascript·ecmascript
CDN3602 小时前
排查实录:网站偶发502/504错误?360CDN回源超时配置与日志分析技巧
前端·数据库
之歆3 小时前
Day07_CSS盒子模型 · 样式继承 · 用户代理样式
前端·css
01漫游者3 小时前
JavaScript函数与对象增强知识
开发语言·javascript·ecmascript
DanCheOo3 小时前
AI 应用的安全架构:Prompt 注入、数据泄露、权限边界
前端·人工智能·prompt·安全架构
We་ct4 小时前
深度剖析浏览器跨域问题
开发语言·前端·浏览器·跨域·cors·同源·浏览器跨域
JoshRen4 小时前
2026教程:上传Excel,用Gemini 3镜像站多模态一键生成问卷分析图表代码与结论(附国内免费方案)
excel
weixin_427771614 小时前
前端调试隐藏元素
前端