前端实现下载的2种方法(个人总结)

一.后端在接口指明了下载的类型是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;'
  // 字符串转ArrayBuffer
  function 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,'下载数据')