前端vue下使用a标签实现下载本地文件的功能
vue的static文件夹中放这个要下载的文件模板,名字可以随意但必须是英文的,前端可以通过设置download内容修改下载后的名字,这里可以是中文的。<a href="../../../static/template.csv" download="分析模板.csv"><img src="../assets/image/download.png" widt...
·
vue-cli 2.0做法:
vue的static文件夹中放这个要下载的文件模板,名字可以随意但必须是英文的,前端可以通过设置download内容修改下载后的名字,这里可以是中文的。
<a href="../../../static/template.csv" download="分析模板.csv">
<img src="../assets/image/download.png" width="20" class="pointer" title="下载文件模板"/>
</a>
注意:
1、download属性中最好把后缀名加上,虽然macbook没有问题,但是windows上没加后缀名的时候会下载一个无后缀名的文件,无法正常打开。
2、文件必须放在static文件夹中,我尝试过放在静态文件assets文件夹中,会报错找不到文件。
————————分割线————————
下面更新一下vue-cli3.0写法。3.0取消了static文件夹,这里需要放在public文件夹里。
data() {
return {
path:process.env.BASE_URL
};
<a :href="`${path}template.csv`" download="自定义名字.csv">
<img src="../../assets/image/download.png"
width="20"
class="pointer"
title="下载文件模板"
alt=""/>
</a>
第一次放pulic 找不到 大概是因为 src 下面的内容会被打包编辑 文件放在pulic 下面了就不会打包 所以再页面上应该是打包之后的地址 他找的是打包之后的文件 而文件并没有被打包 所以找不到
public文件夹介绍:
https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9
更多推荐
已为社区贡献4条内容
所有评论(0)