纯js前端通过url地址，下载文件保存到本地

将url通过XMLHttpRequest请求拿到二进制文件流，转blob对象下载到本地

一、下载含有url的文件

代码如下（示例）：

// 下载含有url的文件
function downloadUrlFile(url, fileName) {
    const url2 = url.replace(/\\/g, '/');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url2, true);
    xhr.responseType = 'blob';
    //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
    // 为了避免大文件影响用户体验，建议加loading
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 获取文件blob数据并保存
            saveAs(xhr.response, fileName);
        }
    };
    xhr.send();
}

二、保存到本地并自动点击

代码如下（示例）：

function saveAs(data, name) {
const urlObject = window.URL || window.webkitURL || window;
const export_blob = new Blob([data]);
//createElementNS() 方法可创建带有指定命名空间的元素节点。
//此方法可返回一个 Element 对象。
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}

三、将文件下载

需要将文件转换成blob文件流格式，再将blob格式转成url格式，最后调用上述方法下载

var blob = new Blob([data.Body]); //data.Body是文件
let blobUrl = URL.createObjectURL(blob)

四、案例

var blob = new Blob([data.Body]);
let blobUrl = URL.createObjectURL(blob)
if (err) {
    _that.$message.error(err)
    return
}
// 保存到本地并自动点击
function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data]);
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
    let formData3 = new FormData()
    formData3.append('taskid', id);
    postAction(_that.downloadOver, formData3)
}
// 下载含有url的文件
function downloadUrlFile(url, fileName) {
    const url2 = url.replace(/\\/g, '/');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url2, true);
    xhr.responseType = 'blob';
    //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
    // 为了避免大文件影响用户体验，建议加loading
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 获取文件blob数据并保存
            saveAs(xhr.response, fileName);
        }
    };
    xhr.send();
}
downloadUrlFile(blobUrl, name)

window.open打开文件资源路径保存文件

该方法交给浏览器下载，会在浏览器下方出现下载进度条，批量下载超过四个会被浏览器拦截，使用定时器settimeout()处理

window.open(url)

使用javascript保存文件

获取html文档，转换成文字保存

function createHtml() {
 try {
  save_record("index1", $("#yhtcprediv").html());
 } catch (e) {
  alert(e);
 }
 }
 function save_record(filename, content) {
 //打开新窗口保存
 var winRecord = window.open('about:blank', '_blank', 'top=500');
 winRecord.document.open("text/html", "utf-8");
 winRecord.document.write(" <div class=\"introBox section package boxBg02\" id=\"yhtcprediv\">" + content + "</div>");         
 winRecord.document.execCommand("SaveAs", true, filename + ".html");
 winRecord.close();
 }

区分blob格式和文本格式

blob格式的数据

文本格式是乱码

总结

good afternoon