vue文档下载

最新推荐文章于 2024-05-30 14:09:08 发布

码农小权权

最新推荐文章于 2024-05-30 14:09:08 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/qq_40280730/article/details/115465287

版权

这篇博客详细介绍了如何使用Ajax技术实现文件下载。通过创建XMLHttpRequest对象，设置请求头，利用`responseType='blob'`处理响应，并结合FileReader读取数据，将响应转换为base64，最后通过创建a标签模拟点击下载。还提供了直接使用a标签下载的另一种方式。内容涵盖了错误处理和下载状态的判断。

摘要由CSDN通过智能技术生成

...
 <div id="download"></div>
 ...

		//接口
          let url = '/xxx/xxxx'
          //完整地址拼接
          let urls = `${url}?schoolCode=${this.schoolCode}&year=${this.currentTerm.year}&term=${this.currentTerm.term}&itemGroupId=${this.typeObj.id}&userKey=${user}&key=XXXXXX表.xls`
          this.downloadFile(urls, function () {
            alert('下载成功')
          })

详细的下载方法：

    downloadFile (url, callBack) {
      var self = this
      var xhr = new XMLHttpRequest()
      let startIndex = url.indexOf('key=')
      const filename = url.substring(startIndex + 4)
      var param = url.substr(url.indexOf('?') + 1, url.length)
      let appids = 'xxxx'
      url = url.substr(0, url.indexOf('?')) + '?appId=' + appids + '&' + encodeURI(param)
      xhr.open('get', url, true) // 也可以使用POST方式，根据接口
      xhr.responseType = 'blob' // 返回类型blob
      
      //xhr.open('post', url, true) // 也可以使用POST方式，根据接口 QUALITY_WEB
      //xhr.setRequestHeader('token', self._util.getUser().userKey)// 设置请求头
      //let obj = new FormData() // 下载时上传一个文件file的写法
      //obj.append('file', this.dataObj.file)
      //obj.append('userKey', this.dataObj.userKey)
      //obj.append('appId', 'QUALITY_WEB')
      //xhr.send(obj)
      
       xhr.setRequestHeader('token', self._util.getUser().userKey)// 设置请求头
      // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
      xhr.onload = function () {
        // 请求完成
        if (this.status === 200) {
          let disposition = false
          let newfilename = ''
          if (this.getResponseHeader('content-disposition')) {
            disposition = true
            let urlheard = this.getResponseHeader('content-disposition').split('=')[1]
            newfilename = decodeURI(urlheard)
          } else {
            disposition = false
          }
          var blob = this.response
          if (window.navigator.msSaveOrOpenBlob) {
            if (disposition === true) {
              navigator.msSaveOrOpenBlob(blob, newfilename)
            } else {
              navigator.msSaveOrOpenBlob(blob, filename)
            }
            setTimeout(function () {
              if (callBack) {
                callBack()
              }
            }, 1500)
          } else {
            var reader = new FileReader()
            reader.onload = function (e) {
              const download = document.getElementById('download')
              const saveLink = document.createElement('a')
              saveLink.href = self.dataURIToBlob(e.target.result)
              if (disposition === true) {
                saveLink.download = newfilename
              } else {
                saveLink.download = filename
              }
              saveLink.target = '_blank'
              download.appendChild(saveLink)
              saveLink.click()
              download.removeChild(saveLink)
              setTimeout(function () {
                if (callBack) {
                  callBack()
                }
              }, 1500)
            }
            reader.readAsDataURL(blob) // 转换为base64，可以直接放入a标签href
          }
        } else {
          self.$Message.error("下载失败！")
          self.$loading.hide()
        }
      }
      // 发送ajax请求
      xhr.send()
    },
  dataURIToBlob (dataURI) {
      let binStr = atob(dataURI.split(',')[1])
      let len = binStr.length
      let arr = new Uint8Array(len)
      for (var i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i)
      }
      return URL.createObjectURL(new Blob([arr]))
    }

还可以直接使用a标签形式

    downLoadFile (url, grade, projectList) {
      let user = this._util.getUser()
      let userKey = user.userKey
      let baseUrl = 'http://api.1school.com.cn:9080/quality/'
      // let baseUrl = 'http://api.1school.com.cn:9080/qualitydev'
      let link = document.createElement('a')
      link.href = baseUrl + `${url}?grade=${grade}&projectList=${projectList}&userKey=${userKey}&appId=QUALITY_WEB`
      link.click()
    }