​
目錄

1.需求確定

2.具體內容

3.總結

1.需求確定
最近在專案中要點選“幫助文件”，下載《系統操作手冊》。

也就是獲取靜態資原始檔export.pdf，將pdf文件下載至本地。

拿到這個需求後，找了些方案，如下

方案1：在vue cli中安裝一些外掛，如jquery，利用jquery下載本地檔案；

方案2：直接使用原生ajax下載本地檔案；

方案3：利用axios請求；

最後考慮到專案中已經在使用axios，就採用方案3。

2.具體內容
在使用過程中發現問題記錄如下：

專案1：vue 2.0 + element ui+es5中

利用a標籤，給個點選事件download()

<aid="attname"class="attname"href="javascript:void(0);"@click="download">幫助文件

頁面已經引用過axios，使用如下：

importaxiosfrom'axios';

Download方法中為避免無法匯出，將待匯出檔名稱改為英文“export.pdf”，匯出後的名稱設定為中文名稱“系統操作手冊.pdf”；

待匯出檔案放在“static”資料夾下；

download(){

axios.get('static/export.pdf',{

responseType:'blob',//重要

}).then(response=>{

consturl=window.URL.createObjectURL(newBlob([response.data]));

constlink=document.createElement('a');

letfname='系統操作手冊.pdf';

link.href=url;

link.setAttribute('download',fname);

document.body.appendChild(link);

link.click();

});

}
專案2：vue 3.0 + iview ui+typescript中

利用a標籤，給個點選事件download()

<aid="attname"class="attname"href="javascript:void(0);"@click="download">幫助文件

頁面已經引用過axios

importaxiosfrom'axios';
Download方法中為避免無法匯出，將待匯出檔名稱改為英文“export.pdf”，匯出後的名稱設定為中文名稱“系統操作手冊.pdf”；

在“public”資料夾下建“export”資料夾，放待匯出檔案；

download(){

axios.get('export/export.pdf',{

responseType:'blob',//重要

}).then(response=>{

consturl=window.URL.createObjectURL(newBlob([response.data]));

constlink=document.createElement('a');

letfname='系統操作手冊.pdf';

link.href=url;

link.setAttribute('download',fname);

document.body.appendChild(link);

link.click();

});

}

其中，在專案2的使用過程中遇到了問題，將待下載檔案放在“static”或“assets”資料夾下，始終獲取不到待下載檔案，不同的字尾的檔案“.json、.ts”等都是404找不到，如下:

經過一天的問題查詢，發現vue cli3.0中靜態資原始檔夾為“public”，在“public”資料夾下建“export”資料夾，放待匯出檔案“export.pdf”後，返回狀態碼200，下載正常：

3.總結
vue cli2.0的靜態檔案是static

vue cli3.0的靜態檔案是public

童鞋們使用過程中千萬不要搞錯了，會獲取不到本地檔案的

注：除本文中pdf檔案外，還可下載其他格式為檔案，使用方式類似；

記錄一下，以備查詢使用；

​