下載檔案的檔名跨瀏覽器都一樣不亂碼的方法

Posted on |

最近專案上有遇到下載檔名時在IE10中文檔名會亂碼的問題，花了一些時間找到解法，把它記錄下來。
這個方法在Chrome, Safari, IE10+, Edge實測都沒問題，理論上IE10之前應該也支援。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * @param {blob} fileFlob - 下載檔案的blob data 
 * @param {string} fileName - 下載檔案名稱
 * @param {string} fileExt - 下檔檔案副檔名 
 */
const handleDownloadFile = (fileFlob, fileName, fileExt) => {
  if (window.navigator.msSaveOrOpenBlob) { 
    // IE
    window.navigator.msSaveBlob(blob, fileName + '.' + fileExt);
  } else {
    const elem = window.document.createElement('a');
    elem.href = window.URL.createObjectURL(blob);
    elem.download = fileName + '.' + fileExt;
    document.body.appendChild(elem);
    elem.click();
    document.body.removeChild(elem);
  }
};