VUE实现下载并导出excel文件（下载后台返回的文件流）

最新推荐文章于 2024-01-18 21:30:00 发布

Yee烊

最新推荐文章于 2024-01-18 21:30:00 发布

阅读量866

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57246557/article/details/126405775

版权

// 封装公共下载表格方法
export const exportExcel = (data,fileName) =>｛ // data 返回的文件流 fileName 下载的文件名
	const blob = new Blob([data])
	if('download' in document.createElement('a')){
		const link = document.createElement('a')
		link.download = fileName
		link.style.display = 'none'
		link.href = URL.createObjectURL(blob)
		document.body.appendChild(link)
		link.click()
		URL.revokeObjectURL(link.href)
		document.body.removeChild(link)
	}else{
		navigator.msSaveBlob(blob,filName)
	}
｝

// 封装请求方法
import request from '@/api/request.js'  // 封装的axios
export const getTableData = (param) => {
    return request({
        url: '/exportExcel',
        method: 'POST',
       	param,
        responseType: 'blob',
    })
}

// 点击下载表格方法 import下载方法与请求方法
async downloadTable(){
	let param = {}  // 请求参数
	let res = await getTableData(param)
	let fileName = '表格'+'.xlsx' // 表格名称
	exportExcel(res,fileName)
}