美文网首页
前端根据链接下载文件自定义名字

前端根据链接下载文件自定义名字

作者: 倩仔6 | 来源:发表于2022-03-24 14:17 被阅读0次
    
    
    
            <span class="a-down" @click="a_down(data_address,'模板.xlsx')">下载</span>
    
    
    //接口请求下载地址
      created() {
        forecastDownload({}).then((res) => {
          this.data_address = res.data;
        });
      },
    
    
      methods: {
         getBlob(url) {
          return new Promise((resolve) => {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', url, true)
            xhr.responseType = 'blob'
            xhr.onload = () => {
              if (xhr.status === 200) {
                resolve(xhr.response)
              }
            }
            xhr.send()
          })
        }
    ,
     // 自定义下载文件名称
     saveAs(blob, filename) {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename)
          } else {
            const link = document.createElement('a')
            const body = document.querySelector('body')
    
            link.href = window.URL.createObjectURL(blob) // 创建对象url
            link.download = filename
    
            // fix Firefox
            link.style.display = 'none'
            body.appendChild(link)
    
            link.click()
            body.removeChild(link)
    
            window.URL.revokeObjectURL(link.href) // 通过调用 URL.createObjectURL() 创建的 URL 对象
          }
        },
        // 点击下载按钮
        a_down(url, name) {
            this.getBlob(url).then((blob) => {
            this.saveAs(blob, name)
          })
        }
    

    相关文章

      网友评论

          本文标题:前端根据链接下载文件自定义名字

          本文链接:https://www.haomeiwen.com/subject/ulnkjrtx.html