一文詳解如何根據後端返回的url下載json檔案

<a href=" http://192.168.0.172:8888/file/package.json" rel="external nofollow"  download="package.json">下載json</a>

const blob = new Blob([res.data]) // 將位元組流(字元流)轉換為 blob 物件

let url = window.URL.createObjectURL(blob)

let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = filename
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下載完成移除元素
window.URL.revokeObjectURL(url) // 釋放掉blob物件

//  解決 ie 不支援下載 blob資源
if ('msSaveOrOpenBlob' in navigator) {
  window.navigator.msSaveOrOpenBlob(blob, filename)
  return
}

<template>
  <div>
    <h1 @click="xhrDownload"> xhr 非同步下載 json 等資原始檔</h1>
    <h1 @click="axiosDownload">axios 非同步下載 json 等資原始檔</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'DownloadFile',
  methods: {
    axiosDownload () {
      // config 是設定物件，可按需設定，例如 responseType，headers 中設定 token 等
      const config = {}
      // 這一步可能很關鍵，特別是在能下載，但是下載下來開啟異常的時候。
      config.responseType = 'blob'
      axios.get('http://localhost:8278/package.json', config).then(res => {
        const blob = new Blob([res.data]) // 將位元組流(字元流)轉換為 blob 物件
        this.blobDownload(blob)
      })
    },

    /**
     * 下載檔案：下載 blob 物件形式的檔案
     * @param blob
     * @param filename
     */
    blobDownload (blob, filename = '檔案.json') {
      let url = window.URL.createObjectURL(blob)
      //  解決 ie 不支援下載 blob資源
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, filename)
        return
      }
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.download = filename
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) // 下載完成移除元素
      window.URL.revokeObjectURL(url) // 釋放掉blob物件
    },

    xhrDownload (params) {
      // token 等header 引數和 請求方式都可以按需設定
      const token = localStorage.getItem('token') || ''
      const url = 'http://localhost:8278/package.json'
      let xhr = new XMLHttpRequest()
      // get 方式
      xhr.open('get', url + '?timeStamp=' + new Date().getTime(), true)
      xhr.setRequestHeader('Cache-Control', 'no-cache')
      xhr.setRequestHeader('Content-type', 'application/json')
      // xhr.setRequestHeader('kms-token', token)
      // 返回型別blob，不設定會打不開 excel
      xhr.responseType = 'blob'
      // 定義請求完成的處理常式，請求前也可以增載入入框/禁用下載按鈕邏輯
      xhr.onload = function () {
        // 請求完成
        if (this.status === 200) {
          let blob = this.response
          let url = window.URL.createObjectURL(blob)
          // 生成 url，建立一個a標籤用於下載
          let a = document.createElement('a')
          a.download = '收支清單.json'
          a.href = url
          a.click()
        }
      }
      xhr.send(JSON.stringify(params))
    }
  }
}
</script>