js生成及下載瀏覽器端的文件-Eric

使用js生成及下載瀏覽器端的文件-Eric

---

前言

之前寫了一篇文章一次下載多個文件的解決方案中寫了如何下載服務器端的文件（支持連續下載多個），今天和大家分享下如何在瀏覽器端生成文件並下載。

---

場景

如果線上經常出現一些偶發性問題，本地又不好排查，我們只好添加一些追蹤日誌，當出現問題的時候我們能根據日誌進行排查。

---

解決方案

首先我們先明確一點，IE瀏覽器不支持直接下載文件（禁用了反向和正向緩存），我們需要使用另存爲功能，google瀏覽器我們可以直接下載。如果是爲了記錄日誌，我們一般選擇txt文件或者html文件（可以加樣式，排版）。

---

代碼

const downloadErrorLog = (fileName, content) => {
    // IE
    if(!!window.ActiveXObject || "ActiveXObject" in window) {
        var winname = window.open('', '_blank');
        winname.document.open('text/html', 'replace');
        winname.document.writeln(content);// 如果是jsx代碼，記得轉化爲html
        winname.document.execCommand('saveas','', fileName);
        winname.close();
    }else{
        let aLink = document.createElement('a');
        aLink.download = fileName;
        aLink.href = "data:text/plain," + content; // 切記，content只能是字符串，如果是html元素，記得使用.innerHTML轉換
        aLink.click(); 
    }
}