页面临时添加a元素来模拟上传下载

页面：

<input type="file" value="文件" id="btn">

　　

JS:

window.onload = () => {
    let btn = document.querySelector("input#btn");
    btn.addEventListener("change", () => {
        let file = btn.files[0];
        let a = document.createElementNS("http://www.w3.org/1999/xhtml", 'a'); // 新建带命名空间的<a>元素
        a.href = window.URL.createObjectURL(file); // 创建URL引用
        a.download = "picNo1.jpg"; // 下载后的文件命名
        document.body.appendChild(a); // 添加临时元素
        a.click(); // 触发点击事件
        document.body.removeChild(a); // 删除临时元素
        window.URL.revokeObjectURL(a.href); // 删除URL引用
    });
};

　　

Eg:

模拟通过base64字符串下载文件

页面：

<input type="button" value="文件" id="btn">

　　

JS:

    btn.addEventListener("click", () => {
        let picBase64 = `data:image/jpeg;base64,/9j/4QAYRXh....`;

        let a = document.createElementNS("http://www.w3.org/1999/xhtml", 'a'); // 新建带命名空间的<a>元素
        a.href = window.URL.createObjectURL(base64ToBlob(picBase64)); // 创建URL引用
        a.download = "picNo1.jpg"; // 下载后的文件命名
        document.body.appendChild(a); // 添加临时元素
        a.click(); // 触发点击事件
        document.body.removeChild(a); // 删除临时元素
        window.URL.revokeObjectURL(a.href); // 删除URL引用
    });

    function base64ToBlob(code) {
        var parts = code.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    }