导出Excel:前端将后端返回的二进制流下载为Excel

导出Excel:前端将后端返回的二进制流下载为Excel

后端直接生成Excel文件

后端主导的Excel表格。压力给到后端同学。前端同学需要做的很简单,只需要使用window.open()即可。

javascript 复制代码
//调用后端接口,传入参数
 async function handleExport() {
    let params = {
        startTime: timeData.value[0],
        endTime: timeData.value[1],
        pageCurrent: currentPage.value,
        userName: inputValue.value || '',
        pageSize: pageSize.value || 10
    }
   await getExportQaList(params)
     //重点来了--调用window.open()方法
        //项目基地址+后端同学的ip、端口号+后端同学的接口路径
          window.open(BaseURL + "http://192.168.10.52:8086" + "/planDay/export")
    },
  }

后端传二进制文件,前端转成Excel

之前一直用的都是调用接口,直接就会下载,今天遇到一个后端会返回数据,然后前端还需要进行操作!后端返回一堆二进制数据:

将二进制流转化为Excel类型并下载下来,具体代码如下:

javascript 复制代码
async function getList(type: string) {
    try{
    let res = await getExportQaList(params)
    const link = document.createElement('a')
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    // download="filename" 属性规定被下载的超链接目标。filename规定作为文件名来使用的文本。
    link.download = fileName // 下载的文件名
    // link(a)是一个dom元素(一个标签),向body中插入了一个dom(a)元素。
    document.body.appendChild(link)
    // 创建一个a链接 使用a.click()模拟点击
    link.click()
    document.body.removeChild(link)
    loadingInstance.close()
    }
    catch(error){
    }
}

详情解析:

定义文件名

const fileName = ${Date.now()}.xlsx 后面必须加.xlsx,否则文件导出打开会提示文损坏之类错误...
Blob构造函数

blob(size,type) Blob构造函数,接受两个参数。第一个参数是一个包含实际数据的数组,第二个参数是数据的类型
样式

如果设置 display:none,将隐藏整个元素,如果您设置 visibility:hidden,元素的内容将不可见,但元素保持原来的位置和大小。
URL.createObjectURL()

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。该URL可用于指定源 object(blob)的内容。
removeChild()

removeChild() 方法指定元素的某个指定的子节点。以Node对象返回被删除的节点,如果节点不存在则返回 null。

注意

出现如下错误是因为没有设置响应类型导致的!

出现上述情况,可能是文件传输过程中有丢失,前端在发送请求时配上responseType: 'blob',这是因为在默认情况下,HTTP响应将被解释为文本,这不适合下载二进制文件格式,如图像或文档。 当响应作为文本处理时,文件中包含的任何二进制数据都将被翻译成文本字符,而打开该文件的应用程序可能无法识别这些字符。这可能导致文件损坏,无法打开或正确使用。

javascript 复制代码
// 导出接口
export function getExportQaList(params:any) {
  return request({
    url: `......`,
    responseType: 'blob', // 避免数据损坏并确保文件可以按预期使用。
    params
  })
}
相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼10 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping10 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙11 小时前
[译] Composition in CSS
前端·css
白水清风11 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript