原理
vue3利用在页面中动态创建a标签,设置a标签属性,触发a标签的click实现文件下载。
代码
在前端工程的public资源目录下,创建template模板文件目录,把要下周的模板文件放入:product-dir.xlsx
<el-button type="warning" size="small" @click="fileDownload(`/template/product-dir.xlsx`)"><el-icon><Document /></el-icon> 模板下载</el-button>
const fileDownload = (url) => {//url:下载文件的urlconst a = document.createElement('a')a.setAttribute('download', '产品目录模板.xlsx')a.setAttribute('target', '_blank')a.setAttribute('href', url)a.click()
}