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)
}