前端使用a标签的下载踩坑_js 模拟a标签下载不完整-优快云博客

本文链接：https://blog.youkuaiyun.com/ZHXT__/article/details/115876551

本文介绍了一种使用JavaScript实现文件下载的方法，解决了不同浏览器兼容性问题，并通过创建a标签完成文件下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因: 最近在开发中, 需要用到下载文件的操作, 刚开始直接使用想使用a标签来达到效果, 但是产品下载后,发现文件名不对, 遂使用html5 的download属性,但是在不同源的下, 以及兼容性(谷歌浏览器支持)问题上, 导致这个效果不能很好实现

– fileSave.js 也可以实现
参考其他用法:

后来使用 js 下载本地的临时文件, 在创建 a 标签达到效果

function getBlob(url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(url);
      cb(xhr.response);
    }
  };
  xhr.send();
}

function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    var link = document.createElement("a");
    var body = document.querySelector("body");

    link.href = window.URL.createObjectURL(blob);
    link.download = filename;

    // fix Firefox
    link.style.display = "none";
    body.appendChild(link);

    link.click();
    body.removeChild(link);

    window.URL.revokeObjectURL(link.href);
  }
}
function download(url, filename) {
  getBlob(url, function(blob) {
    saveAs(blob, filename);
  });
}

export default {
    download,
    getBlob,
    saveAs
}