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

};

相关推荐
一只小阿乐3 小时前
react 封装弹框组件 传递数据
前端·javascript·react.js
533_3 小时前
[element-plus] el-tree 动态增加节点,删除节点
前端·javascript·vue.js
禁止摆烂_才浅3 小时前
前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离
前端·javascript·react.js
wshzd3 小时前
LLM之Agent(二十九)|LangChain 1.0核心组件介绍
前端·javascript·langchain
程序猿_极客3 小时前
Vue 2脚手架从入门到实战核心知识点全解析(day6):从工程结构到高级通信(附代码讲解)
前端·javascript·vue.js·vue2学习笔记
q***71853 小时前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
一只小阿乐3 小时前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
web加加3 小时前
vue3 +vite项目页面防f12,防打开控制台
前端·javascript·vue.js
一瞬祈望4 小时前
Microsoft Excel 效率专题:创建下拉列表,规范数据输入
excel