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(); 
    }
}