前端创建导出下载-Blob对象

121 阅读1分钟

   const downloadBinaryData = (data, filename) => {
        const blob = new Blob([data]); // 创建二进制数据的 blob 对象
        const url = URL.createObjectURL(blob); // 创建下载链接
        const a = document.createElement('a'); // 创建一个隐藏的 <a> 元素
        a.href = url; // 设置下载链接
        a.download = filename; // 设置下载的文件名
        document.body.appendChild(a); // 将 <a> 元素添加到页面中
        a.click(); // 触发下载
        document.body.removeChild(a); // 下载完成后,移除 <a> 元素
        URL.revokeObjectURL(url); // 释放创建的对象 URL
    }
    说明:
1.  创建一个Blob对象,将传入的二进制数据作为参数。
2.  使用URL.createObjectURL方法创建一个下载链接,将Blob对象转换为URL3.  创建一个隐藏的`<a>`元素。
4.  将下载链接设置为`<a>`元素的href属性。
5.  设置下载的文件名为传入的filename参数。
6.`<a>`元素添加到页面中。
7.  触发`<a>`元素的点击事件,开始下载。
8.  下载完成后,从页面中移除`<a>`元素。
9.   使用URL.revokeObjectURL方法释放创建的URL对象。 这样,通过调用`downloadBinaryData`函数,可以实现下载二进制数据的功能。

 // 导出操作
    const handleDown = (type) => {
        console.log('include_detail=', include_detail)
        let includeDetail: string = ''
        if (type == true) {
            includeDetail = '1'
        } else {
            includeDetail = '0'
        }
        let token = getStore('Token')
        let obj = {
            token:token,
            switch_dimensions: switch_dimensions,
            search_business_line: search_business_line,
            search_time_type: search_time_type,
            datetype: valueRadio,
            times: times,
            business_line: ctxlint.line,
            is_business: is_business,
            include_detail: includeDetail,
        }
        //后端导出连接
        let par = `${window.CONFIG.URI}/api/xxx/export?${qs.stringify(obj)}`
        window.location.href = par
        
        // 前端导出 
        
           Get('/api/xxx/export', obj).then(res=>{
            downloadBinaryData(res, 'your-desired-filename.xlsx')
        })
    }