vue项目:前端下载文件时指定文件名

// 调用下载接口
     batchCollectionimportTemplate() {
       xxxx().then(response => {
         // response.msg接口返回的文件名称
         // 将文件名称处理成想要的
         let downName = response.msg.split('_')[1]
         // 处理文件下载地址
         let url = process.env.VUE_APP_BASE_API + '/common/download?fileName=' + encodeURI(response.msg) + '&delete=' + true;
         this.getBlob(url, (blob) => {
           this.saveAs(blob, downName)
         })
       });
     },
     getBlob(url, cb) {
       var xhr = new XMLHttpRequest()
       xhr.open('GET', url, true)
       xhr.responseType = 'blob'
       xhr.onload = function() {
         if (xhr.status === 200) {
           cb(xhr.response)
         }
       }
       xhr.send()
     },
     saveAs(blob, filename) {
       if (window.navigator.msSaveOrOpenBlob) {
         navigator.msSaveBlob(blob, filename)
       }
       else {
         var link = document.createElement('a')
         var body = document.querySelector('body')

         link.href = window.URL.createObjectURL(blob)
         link.download = filename

         link.style.display = 'none'
         body.appendChild(link)

         link.click()
         body.removeChild(link)
         window.URL.revokeObjectURL(link.href)
       }
     },

你可能感兴趣的:(vue项目:前端下载文件时指定文件名)