前端開發學習資料模闆?在前端開發中，有的時候我們不需要和後台去交互，而是直接将文檔類型文件直接下載到本地，比如像一些不需要數據交互的官方網站，當裡面有提供幫助文檔下載的時候，就需要我們實現本地文檔下載的功能而這個功能完全可以由前端來實現，一起來看看：，接下來我們就來聊聊關于前端開發學習資料模闆?以下内容大家不妨參考一二希望能幫到您!

前端開發學習資料模闆

在前端開發中，有的時候我們不需要和後台去交互，而是直接将文檔類型文件直接下載到本地，比如像一些不需要數據交互的官方網站，當裡面有提供幫助文檔下載的時候，就需要我們實現本地文檔下載的功能。而這個功能完全可以由前端來實現，一起來看看：

假設我們的目錄結構是這樣的：

js

img

css

page

file

這四個都是文件夾，裡面放着相關文件，隻有file目錄是我們需要下載用的，在file目錄裡可以再放一下目錄：

fileinfo.txt

test1.doc

test2.pdf

test3.ppt

test4.xlsx

fileinfo.txt文件中就可以寫我們的目錄信息:

{

"datainfo":[

{"url":"file/ test1.doc","name":"test1.doc"},

{"url":"file/ test2.pdf","name":"test2.pdf"},

{"url":"file/test3.ppt","name":"test3.ppt"},

{"url":"file/ test4.xlsx ","name":"test4.xlsx"},

]

}

信息格式最好是json格式的，因為我們要用ajax去請求的，json方便處理。

當我們在html頁面中需要實現下載時首先需要ajax去獲取txt文件得到裡面所存儲的json對象，然後用下邊這段js代碼來進行點擊下載：

function fileDownload(url,name){

var nowA = document.createElement('a');

nowA.setAttribute('href',url);

nowA.setAttribute('download',name);

nowA.style.display = 'none';

document.body.appendChild(nowA);

nowA.click();

document.body.removeChild(nowA);

}

這樣當你在頁面中點擊時會跳轉出下載文件的頁面，下載功能完成。

如果是本地文件打開方式可能看不到效果，會出現跨域請求的錯誤，因為ajax是不支持跨域的，所以我們需要用服務器地址或者localhost本地服務的地址打開就能成功。因為開發完成都是放在服務器上的，而我們的文件都是同一目錄下的，所以不用擔心跨域的問題。

經過測試，目前這個方法對常見浏覽器都是支持的，隻有ie是會在頁面中打開文件，因為本次開發不考慮ie浏覽器的問題，所以對ie就沒有進行特殊處理。在網上也查看了一下有關ie的方法，但是好像都不靠譜，對于那種用label轉換格式的方法下載的文件會有錯誤打不開的情況，所以說這種方法還是最好用的，ie需特殊處理，方法需自行研究。

以上隻是提供一種方法，也是本人開發過程中感覺好用的一種，沒有絕對性。文章有不足之處還請見諒。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!