vue2+下载文件（静态文件）

<template>
  <div class="router-container">
    <!-- 下载 -->
    <el-button @click="downLoad">
      <i class="iconfont icon-down"></i>{{ $t('area.title2') }}</el-button
    >
  </div>
</template>
<script>
export default {
  mounted() {
    if (process.env.NODE_ENV !== 'development') {
      this.href = parent.window.location.origin + '/区域导入模板.xlsx'
    } else {
      this.href = parent.window.location.origin + '/区域导入模板.xlsx'
    }
  },
  methods: {
    // 下载模板
    downLoad() {
      let xhr = new XMLHttpRequest()
      //get后边是public文件夹下需要下载的模板的文件名
      xhr.open('get', `/区域管理模板.xlsx`, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(this.response)
          downloadElement.href = href
          //这个也是文件名
          downloadElement.download = '区域管理模板.xlsx'
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement)
          window.URL.revokeObjectURL(href)
        }
      }
      xhr.send()
    }
  }
}
</script>