前端调用后端接口导出文件

情况1：

有遇到过只需要这样就能成功调用的接口：

  const url = process.env.VUE_APP_BASE_API + \'/api/export\'
  window.location.href = url

情况2：

有时候要麻烦点：

api：

  export(params = {}) {
    return httpPost(\'/api/export\', params, { responseType: \'blob\' })
  }

 

组件：

// 导出数据
    exportData() {
      costModel.export({
        page: 1,
        pageSize: this.total,
        ...this.searchParams
      }).then(res => {
        console.log(\'res\', res)
        const a = document.createElement(\'a\')
        // 创键临时url对象
        const url = URL.createObjectURL(res)

        a.href = url
        a.download = \'表格.xlsx\'
        a.click()
        // 释放之前创建的URL对象
        window.URL.revokeObjectURL(url)
      })
    },

 可以封装一下：

export function exportFile(blob, title, type = \'xlsx\') {
  const a = document.createElement(\'a\')
  // 创键临时url对象
  const url = URL.createObjectURL(blob)
  a.href = url
  // 文件名
  a.download = title + \'.\' + type
  a.click()
  // 释放之前创建的URL对象
  window.URL.revokeObjectURL(url)
}

组件中调用：

exportData() {
      costListModel.export({
        page: 1,
        pageSize: this.total,
        ...this.searchParams
      }).then(res => {
        // console.log(\'res\', res)
        exportFile(res, \'文件标题\', \'xlsx\')
      })
    },

 

知识点补充：

URL.createObjectURL()

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

HTML <a> download 属性

参考：https://www.runoob.com/tags/att-a-download.html

download 属性是HTML5中新增的 <a> 标签属性。

<a download="filename">

filename: 指定文件名称。

HTML对象 <a>

参考：https://www.w3school.com.cn/jsref/dom_obj_anchor.asp