前端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