api接口请求中添加responseType: 'arraybuffer',

export function exportData(data) {
  return request({
    url: '/crawler/taskmanagement/exportexcel',
    responseType: 'arraybuffer',
    method: 'post',
    data
  })
}

接受后端穿过来的数据流方法一:

      DownloadData(id) {
        var that = this
        exportData({id: id}).then(res => {
          let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
          let objectUrl = URL.createObjectURL(blob);
          window.location.href = objectUrl;
        })
      },

接受后端穿过来的数据流方法二(此方法可以指定下载表格的名称):

      DownloadData(id) {
        var that = this
        exportData({id: id}).then(res => {
          const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '分拣表.xlsx' // 获取后端返回存在请求头里边的表单名字
          that.$options.methods.fileDownload(res.data, filename);
        })
      },

 fileDownload(data, fileName) {
        const blob = new Blob([data], {
          type: 'application/octet-stream'
        })
        const filename = fileName || 'filename.xls'
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(blob, filename)
        } else {
          var blobURL = window.URL.createObjectURL(blob)
          var tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', filename)
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          window.URL.revokeObjectURL(blobURL)
        }
      },

后端使用ThinkPHP5,后端相关编码请查看https://blog.csdn.net/supramolecular/article/details/83303944

GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:26 天前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐