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

后端直接生成Excel文件

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

//调用后端接口，传入参数
 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类型并下载下来，具体代码如下：

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响应将被解释为文本，这不适合下载二进制文件格式，如图像或文档。 当响应作为文本处理时，文件中包含的任何二进制数据都将被翻译成文本字符，而打开该文件的应用程序可能无法识别这些字符。这可能导致文件损坏，无法打开或正确使用。

// 导出接口
export function getExportQaList(params:any) {
  return request({
    url: `......`,
    responseType: 'blob', // 避免数据损坏并确保文件可以按预期使用。
    params
  })
}

原文地址：https://blog.csdn.net/mzp520lf/article/details/144272947

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！