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