[JS筆記]Js download file programmatically & padding zero

這兩天有個需求，需要從某個網站批次幾百筆下載流水序號的檔案
身為工程師，絕對不會在那邊一個一個點…

於是就開始思考，應該怎麼做比較快
前端部分能應用的語言只有Js了
後端的話可以用Java、PHP或是Node去批次送request

但是用Java、PHP的話還要去寫檔和存檔案，以及處理網路錯誤之類的
真的是有點懶的寫那麼多程式碼…，畢竟能懶就懶，能撈就撈
而且下載並存檔這件事情Chrome已經幫我們做得很棒了啊
能不能在本地端寫個網頁靠Js去批次下載啊

身為前端工程師，跟網頁打交道就是我們的人生
知道anchor tag內有一個download attribute，是用來控制使用者點擊之後是否直接下載檔案也是很理所當然的
支援：HTML <a> download Attribute

於是想說寫個anchor tag，用JQuery動態更改href的url path，然後再用JQuery去trigger anchor tag 的click function，進而模擬使用者點擊連結
測試的程式碼如下：

HTML：

<a href="http://example.com/SW001.jpg" id="x" download>Go</a>

JS：

var x = $("#x");
x.click(); // or x.trigger("click");

好啊結果Chrome直接不鳥我QQ，目前原因不明，尚未研究
結果就是玻璃心直接碎一波

只好去Google…
發現也有滿多人有這個問題的
但是我爬完幾篇文章之後，覺得比較好的做法是這個pure JS的寫法
簡單明瞭落落大方又不失效能

var link = document.createElement('a');
    link.href = "http://example.com/SW001.jpg";
    link.download="";
    link.click();

嘗試了一下還真的能成功根據href的url下載檔案，蒸蚌
接下來問題來了
我要下載的檔案的檔名流水號是000,001,002…..100
不能直接跑for迴圈給數字啊，左邊必須要補0

由於太懶，不想自己寫，跑去Google找程式碼複製貼上
也是發現滿多種方式的，很多寫法都用遞迴在做
我比較笨，雖然看得懂但是不太喜歡遞迴
遞迴：

/* 左邊補0 */
function padLeft(str, lenght) {
    str = '' + str; //後來加的
    if (str.length >= lenght) {
        return str;
    } else {
        return padLeft("0" + str, lenght);
    }
}

/* 右邊補0 */
function padRight(str, lenght) {
    str = '' + str;
    if (str.length >= lenght) {
        return str;
    } else {
        return padRight(str + "0", lenght);
    }
}

於是找到一個用array join的做法，覺得這寫法太神了

//使用 array join 的方式，一次產生要補足的 "0"
/* 左邊補0 */
function padLeft(str, lenght) {
    str = '' + str;
    return str.length >= lenght ? str : new Array(lenght - str.length + 1).join("0") + str;
}

/* 右邊補0 */
function padRight(str, lenght) {
    str = '' + str;
    return str.length >= lenght ? str : str + new Array(lenght - str.length + 1).join("0");
}

最後外面包一層for loop就打完收工了

var i = 0;
for(i = 0;i<=100;i++){
  var filename = padLeft(i,3);
  console.log("filename:"+filename);
  var link = document.createElement('a');
  link.href = "http://example.com/SW"+filename+".jpg";
  link.download="";
  link.click();
}

不過這邊要注意一下，anchor tag的download有給值的話，表示的是下載檔案後儲存的檔案名稱，這邊給空字串是代表下載之後使用原檔案名稱儲存

Reference

藍色小威 — JavaScript 字串補零
Anders Poulsen — How to open a pdf downloaded from an API with JavaScript