前端vue下使用a标签实现下载本地文件的功能

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

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值