导出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
  })
}
相关推荐
excel2 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着2 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友4 小时前
什么是API签名?
前端·后端·安全
会豪6 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子6 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶6 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子6 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_6 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark6 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23336 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts