记录一下项目中Vue对接后端接口导出功能实现

后端返回的数据为

代码

 // 导出订单
    async derive(row) {
      const id = row.id
      const platform = row.platform
      const exportNam = row.orderId
      await ExportOrders(id, platform, exportNam).then(function(res) {
        console.log(res)
        const content = res
        console.log(content)
        const blob = new Blob([content], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const fileName = exportNam + '.xlsx' // 导出文件名称自定义
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }

要在接口文件中加上 responseType: 'blob'，要不然下载的.xlsx打不开

// 导出订单
export const ExportOrders = (id, platform, exportName) => request({ url: `/seller/operatingCenter/ExportOrders?id=${id}&platform=${platform}&exportName=${exportName}`, method: 'get', responseType: 'blob' })

参考链接：blob导出文件及文件损坏处理_Jasivc的博客-CSDN博客_blob下载文件损坏

                  Vue 导出功能_安静的小女子的博客-CSDN博客_vue导出功能