在Vue框架中通过a标签实现下载前端本地资源的功能

vue-cli 2.x 

在vue-cli 2.x中，需要将本地资源放在static文件夹下，文件的名称可以随意，但是必须是英文。如果后续需要修改下载文件的名称，可以通过 download 这个属性来控制，在这里可以是中文。如下代码：

<a href="../../../static/template.csv" download="分析模板.csv">下载文件</a>

vue-cli 3.x 

在vue-cli 3.x中，需要将本地资源放在public文件夹下，文件的名称可以随意，但是必须是英文。如果后续需要修改下载文件的名称，可以通过 download 这个属性来控制，在这里可以是中文。如下代码：

<a :href="`${path}data.xlsx`" download="data.xlsx">下载商品库存数据</a>

data() {
    return {
      path: process.env.BASE_URL
    }
}

注意：

1、在设置download属性值时，必须有文件后缀名，否则下载的文件将无法打开。

2、本地文件必须放在 static 或者 public 文件夹中，不能放在assets文件夹中，否则下载时会报 找不到文件的错误

 

实测3.X完美使用, 原贴地址:点击前往