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

};

相关推荐
金融小白数据分析之路1 小时前
绍兴市镇街echarts 制作
前端·数据库·echarts
Slice_cy2 小时前
Mint 自研框架设计与实现:从重复开发走向配置驱动(二)
前端·后端·架构
greenbbLV2 小时前
积分兑换商城供应商挑选:避坑要点与靠谱选择解析
前端·小程序
张元清2 小时前
React useDropZone Hook:搭建一个文件拖放区(2026)
javascript·react.js
a1117762 小时前
3D 建筑编辑器 Pascal Editor THreeJS 开源
前端·3d·html
jason_yang2 小时前
写给女儿的英语App
前端·人工智能
思码梁田2 小时前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
勇往直前plus3 小时前
Vite :从双击 HTML 到现代前端开发
前端·html
muddjsv3 小时前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
HH‘HH3 小时前
前端应用的离线暂停更新策略:原理、实现与最佳实践
开发语言·前端·php