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