フロントエンドのvueでファイルをダウンロードするいくつかの方法

最初の方法は、フロントエンドでハイパーリンクを作成し、aタグのリンクからバックエンドのサービスにgetリクエストを送り、バックエンドからファイルのストリームを受け取るというもので、これは非常に簡単です：その方法は

<a :href='"/user/downloadExcel"' >Download template</a>

Another scenario is to create div tags that dynamically create a tags.
<div name="downloadfile" onclick="downloadExcel()">download</div>
function downloadExcel() {
    let a = document.createElement('a')
    a.href = "/user/downloadExcel"
    a.click();
} 
There is another addition.
 function downloadExcel() {
    window.location.href = "/tUserHyRights/downloadUsersUrl";
} 

2つ目の方法は、iframeを作成する方法です。

<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click=& quot;handleExport(scope.row)">export</el-button>
//method method.
handleExport(row) {
      var elemIF = document.createElement('iframe')
      elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                    '&category=' + row.category 
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF)
    }

3つ目の方法は、バックエンドから送信されるpostリクエストにblob形式を使用する方法です。

<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click=& quot;handleExport(scope.row)">export</el-button>
//method method
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
 * Encapsulate a request to export an Excal file
 * @param url
 * @param data
 * @returns {Promise}
 */
//api.js
export function exportExcel(url, options = {}) {
  return new Promise((resolve, reject) => {
    console.log(`${url} request data, options =>`, JSON.stringify(options))
    axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
    axios({
      method: 'post',
      url: url, // request address
      data: options, // parameters
      responseType: 'blob' // indicates the type of data returned by the return server
    }).then(
      response => {
        resolve(response.data)
        let blob = new Blob([response.data], {
          type: 'application/vnd.ms-excel'
        })
        console.log(blob)
        let fileName = Date.parse(new Date()) + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          // console.log(2)
          navigator.msSaveBlob(blob, fileName)
        } else {
          // console.log(3)
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //free memory
          window.URL.revokeObjectURL(link.href)
        }
      },
      err => {
        reject(err)
      }
    )
  })
}

バックエンドが提供するダウンロードインターフェイスがget型であれば、メソッド1と2を直接使うことができるので、簡単で便利です。もちろん、メソッド3を使ってもいいのですが、ちょっと遠回りのような気がします。
バックエンドが提供するダウンロードインターフェイスがpost型の場合、3番目のメソッドを使う必要があります。