【vue】---- 前端實現下載Excel功能

一、實現思路：

html5 中，在 a 標籤上添加 download 屬性能夠實現文件下載。

<a download="文件名" href="文件下載接口地址"></a>   

 

二、在此次項目中，點擊非a標籤按鈕下載文件，經過建立a標籤來實現。

<script>
  export default {
    data() {
      return {
        downFileName: 'user_dowm',  // 自定義下載的文件名
      }
    },
    methods:{
　　   // 點擊下載事件
      downLoadFail(data) {
      this.$axios({
        headers: {
          'Content-Type': 'application/json'
        },
        url: '/user/download',
        data: data,
        responseType: 'blob',
        method: 'get'
      }).then(res => {
        if (typeof window.chrome !== 'undefined') {
          // Chrome version
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          const urls = window.URL.createObjectURL(blob)
          const a = document.createElement('a') // 生成虛擬a標籤
          a.href = urls
          a.download = this.downFileName + '.xlsx'
          a.click()
          document.body.removeChild(a) // 下載完成移除元素
          window.URL.revokeObjectURL(urls) // 釋放掉blob對象
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // IE version
          const blob = new Blob([res], { type: 'application/force-download' })
          window.navigator.msSaveBlob(blob, this.downFileName)
        } else {
          // Firefox version
          const file = new File([res], this.downFileName, { type: 'application/force-download' })
          window.open(URL.createObjectURL(file))
        }
      }).catch(err => {
        console.log(err)
      })
    }
    }
  }
</script>

 

注：發現一篇實用的前端下載文件的參考，貼上~

https://www.jianshu.com/p/48ad4346fe4b