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

2022-03-24  本文已影响0人  倩仔6



        <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)
      })
    }
上一篇下一篇

猜你喜欢

热点阅读