在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完美使用, 原貼地址:點擊前往