本文記一下如何用typescript寫的前端來上傳/下載檔案。

上傳

上傳通常用一個file型別的input來實現，再typescript中我們可以模擬這樣一個dom：

function loadFileCommand(): void => {
    const input = document.createElement('input');
    input.type = 'file';
    input.onchange = _this => {
        const fileArray = input.files;
        // 這裡注意預設多選檔案，返回的是一個File型別的array
    };
    input.click();
  });
 

下載

下載同樣可以用dom的方式實現，需要選擇檔案型別，參考：
https://developer.mozilla.org/en-US/docs/Web/API/Blob/type：

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

也可以用下面一個庫saveAs：

npm install file-saver --save
npm install -D @types/file-saver
 

// 下載一個二進位制檔案
const dataArray = new Uint8Array(data);
const dataBlob = new Blob([dataArray.buffer], {type: 'application/octet-stream'});
FileSaver.saveAs(dataBlob, 'hlp.bin');