vue3中，下载模板（三）——前端本地下载附件

效果

1、页面

index.vue

<el-button type="primary" @click="fileDownload">下载模板</el-button>
<script setup>
import {downFile} from '@src/utils/util'
// 下载模板
const fileDownload = async () => {
  downFile('Plan-Import模板.xlsx')
}
</script>

2、模板

3、file流文件处理

src\utils\util.js

//本地文件下载  下载的模板文件放在public下的file文件夹中
export const downFile = (fileName) => {
  const anchor = document.createElement('a')
  anchor.href = `${process.env.BASE_URL}static/file/${fileName}`
  anchor.setAttribute('download', fileName)
  anchor.innerHTML = 'downloading...'
  anchor.style.display = 'none'
  document.body.appendChild(anchor)
  setTimeout(() => {
    anchor.click()
    document.body.removeChild(anchor)
    setTimeout(() => {
      self.URL.revokeObjectURL(anchor.href)
    }, 250)
  }, 66)
}