前端实现文件下载的功能-CSDN博客

本文介绍了前端使用JavaScript实现文件下载的多种方法，包括downFile函数、download属性、DataUrl或BlobUrl、location.href和iframe等，还提及了各方法的注意事项与缺点。此外，推荐了FileSaver插件，它基于HTML5，能支持多种格式文件保存，适用于不支持相关接口的浏览器。

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

1.第一种方法：downFile(下载地址, 保存名称);

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

2.第二种方法：

<a href="/api/getImg" download="file.xlsx">下载</a>

download：此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 / 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。

注意：

（1）.仅适用于同源URL

（2）尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL，以方便用户下载使用 JavaScript 生成的内容

（3）如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性（后端一般会设置Content-Disposition: attachment; filename="filename.jpg"）

缺点：IE不支持download属性、只能下载不能被浏览器打开的文件类型，图片、文本文件、html这种类型的文件无法直接下载可以被浏览器打开的只能在浏览器中预览。

3、DataUrl或BlobUrl实现下载

通过DataUrl或BlobUrl可以实现图片、文本文件、html不预览直接下载，具体使用可以看这篇文章：https://blog.csdn.net/mo3408/article/details/90515277

4.location.href和iframe下载

（1） location.href = 'template.xlsx'

（2）：

// 无闪现下载excel
function download(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  function iframeLoad() {
    console.log('iframe onload');
    const win = iframe.contentWindow;
    const doc = win.document;
    if (win.location.href === url) {
      if (doc.body.childNodes.length > 0) {
        // response is error
      }
      iframe.parentNode.removeChild(iframe);
    }
  }
  if ('onload' in iframe) {
    iframe.onload = iframeLoad;
  } else if (iframe.attachEvent) {
    iframe.attachEvent('onload', iframeLoad);
  } else {
    iframe.onreadystatechange = function onreadystatechange() {
      if (iframe.readyState === 'complete') {
        iframeLoad;
      }
    };
  }
  iframe.src = '';
  document.body.appendChild(iframe);

  setTimeout(function loadUrl() {
    iframe.contentWindow.location.href = url;
  }, 50);
}

5.应用

axios({
      method: 'post',
      url: '/api/systemLog/downLoadLog',
      data: bodyData,
      responseType: 'arraybuffer'
    }).then((res) => {
      // type 为需要导出的文件类型，此处为xls表格类型
        const blob = new Blob( [res.data], {type: 'application/vnd.ms-excel'} )
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        // 创建下载链接
        const downloadHref = url.createObjectURL(blob)
        // 创建a标签并为其添加属性
        let downloadLink = document.createElement('a')
        downloadLink.href = downloadHref
        downloadLink.download = '导出日志.xlsx'
        // 触发点击事件执行下载
        downloadLink.click()
    })

6.使用FileSaver插件：

链接：https://pan.baidu.com/s/1NhbGnrT8UBhg_oIuzk2nRA
提取码：kpju

备用地址：

链接：https://pan.baidu.com/s/1SIeIESll9nN57ETVB3mlbA
提取码：7178

FileSaver.js特点：

FileSaver.js 是一款基于 HTML5 完成文件保存的插件，它可以帮我们直接从网页中导出多种格式文件。

同时对于那些本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器，FileSaver.js 也提供了支持。

使用 FileSaver.js 可以让 Web 应用完美的生成文件，或者保存那些不应该发送到外部服务器的敏感信息。是一种简单易用的浏览器端文件保存方案。

浏览器支持：

在需要使用的页面中将 JavaScript 文件引入即可。

保存文本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="FileSaver.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var blob = new Blob(["欢迎访问 hangge.com"], {type: "text/plain;charset=utf-8"});
      saveAs(blob, "文件导出测试.txt");
    </script>
  </head>
  <body>
  </body>
</html>

可以看到浏览器会自动下载文件。同时打开文件发现内容也是正确的。
另一种写法等同于上面的效果：

var file = new File(["欢迎访问 hangge.com"], "文件导出测试.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

保存图片：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="FileSaver.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      function onload() {
        //在canvas上绘制矩形
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "blue"; //填充颜色
        context.fillRect(50,50,200,100); ////绘制实心矩形
 
        //将canvas内容保存为文件并下载
        canvas.toBlob(function(blob) {
            saveAs(blob, "hangge.png");
        });
      }
    </script>
  </head>
  <body onload="onload()">
    <canvas id="myCanvas" width="400" height="200">
  </body>
</html>