两种情况

• url经过后端处理，返回的是文件流
• url没有经过后端处理，返回的是文件存储地址url

第一种情况：

• window.open('url')
  缺点：会打开一个新的窗口，请求完成后自动关闭，用户体验不是特别好，但是问题不大
• <a href="url" download="文件名"></a>
  虽然不会打开新弹窗，但是兼容性不好，IE 需要>IE13，safari暂未支持

第二种情况：
上面的方法对于第二种情况，都只是跳转页面并展示图片，但是并不会自动下载

使用canvas将地址url转换成dataurl

Data URLs 由四个部分组成：前缀 (data:)、指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身，

方法：

function downloadQrCodeByBase64(dataUrl, fileName) {
  const img = new Image();
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 将画布内容转换为base64
    const base64 = canvas.toDataURL();
    const a = document.createElement('a');
    a.href = base64;
    a.download = fileName;
    // 触发a链接点击事件，浏览器开始下载文件
    a.click();
  };
  img.src = dataUrl;
  // 必须设置，否则canvas中的内容无法转换为base64
  img.setAttribute('crossOrigin', 'Anonymous');
}

缺点：图片越大，转换后的 base64 编码越长，尽量避免对大图进行 DataURL 转换，防止转换后的长度超出浏览器限制

同源单文件

针对单文件的情况下，同源的文件，可以通过 < a> 标签的 download 属性下载文件

const elt = document.createElement('a');
elt.setAttribute('href', url);
elt.setAttribute('download', 'file.png');
elt.style.display = 'none';
document.body.appendChild(elt);
elt.click();
document.body.removeChild(elt);

但是这个方案并不适用于非同源的资源，此时它相当于普通的超链接，点击会跳转到资源页面，而不是下载。

非同源

如果不存在CORS问题, 可以借助Blob实现下载(构造xhr请求文件地址, 以Blob的形式接收Response)：

function downloadWithBlob(url) {
 fetch(url).then(res => res.blob().then(blob => {
  var a = document.createElement('a');
  var url = window.URL.createObjectURL(blob);
  var filename = 'file.png';
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
 }));
}

如果存在CORS问题，可以考虑使用 canvas 将图片转换成 base64 编码之后再通过 标签的 download 属性下载：

function downloadPic(url) {
 const img = new Image;
 const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');
 img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0, 0);
 
  const elt = document.createElement('a');
  elt.setAttribute('href', canvas.toDataURL('image/png'));
  elt.setAttribute('download', 'file.png');
  elt.style.display = 'none';
  document.body.appendChild(elt);
  elt.click();
  document.body.removeChild(elt);
 };
 img.crossOrigin = 'anonymous';
 img.src = url;
}

如果有文件content

function funDownload(content, filename) {
    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};

将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格式的数据

文本格式是乱码

总结