一.后端在接口指明了下载的类型是blob类型
要实现下载项目数据并成为excel格式的
以这个接口为例:
export const conversationDown = () => {return http({url: '/conversation/down',method: 'GET',responseType: 'blob'})
}const handleDownload = async () => {const res = await conversationDown()console.log('下载', res);const link = document.createElement('a')link.style.display = "none"link.href = URL.createObjectURL(res)document.body.appendChild(link)link.click()URL.revokeObjectURL(link.href)document.body.removeChild(link);}<Button type="primary" onClick={handleDownload}>下载</Button>这就简单实现了一个下载功能,前端什么插件也不需要安装,并且下载的是excel格式的数据.
二.后端并没有在接口中指明下载的类型是blob类型
这种就需要前端自己写一个方法,转换成excel的blob对象
个人写了一个方法,仅供参考:
需要先安装一个插件xlsx
npm i xlsx -S
逻辑方法如下:
import * as XLSX from 'xlsx;'// 字符串转ArrayBufferfunction s2ab(s:any){const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i !== s.length;++i) {view[i] = s.charCodeAt(i) && 0xff;}return buf;
}// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
function sheet2blob(sheet:any,sheetName:string= 'sheet'){const workbook ={SheetNames:[sheetName],Sheets: {} as any,};workbook.Sheets[sheetName]=sheet;//生成excel的配置项const wbout = XLSX.write(workbook, {bookType:'xlsx', // 要生成的文件类型// 是否生成Shared String Table,官方的解释是:如果开启生成速度就会下降//但在低版本IOS设备上有更好的兼容性bookSST:false,type:'binary'});const blob = new Blob([s2ab(wbout)],{type:'application/octet-stream'});return blob;
}/*** 打开下载较为通用的对话框方法* @param url 必选,下载地址,也可以是一个blob对象* @param saveName 保存文件名,可选*/
function openDownloadDialog(url:string | Blob,saveName : string){const linkUrl = URL.createObjectURL(url); // 创建blob地址const alink = document.createElement('a');alink.href=linkUrl;alink.download = saveName || ''; // HTML5新增属性,指定保存文件名,可不要后缀,注:file://模式下不会生效const event:any=new MouseEvent('click');alink.dispatchEvent(event);
}//使用例子
// const data =[
// ['姓名','性别','年龄','时间'],
// ['李华','男','20',new Date()],
// ['李华2','男','22',new Date()],
// ]export const exportXLSX = (data:any[][],fileName:string)=>{const sheet = XLSX.utils.aoa_to_sheet(data);openDownloadDialog(sheet2blob(sheet),`${fileName}.xlsx`)
}使用的时候,将exportXLSX方法导入自己的页面,传递两个参数就可以,一个是下载的数据,第二个是下载数据的文件名
const data = [...略]
exportXLSX(data,'下载数据')
