前端实现下载文件不弹窗解决方案

前端实现下载文件不弹窗解决方案

在前端开发中，我们经常需要实现文件下载功能。但默认情况下，点击下载链接会弹出新窗口或新选项卡，这并不是最佳的用户体验。

本文将介绍两种在前端实现下载文件而不弹窗的解决方案：

1. 使用 'download' 属性

const fileUrl = 'http://example.com/file-to-download.pdf';
const fileName = 'downloaded-file.pdf';

const link = document.createElement('a');
link.href = fileUrl;
link.download = fileName;
link.click();

在这段代码中，我们首先创建了一个 <a> 元素，然后设置其 href 属性为要下载的文件 URL，download 属性为要保存的文件名。最后，我们通过模拟用户点击链接的行为，触发文件下载。

2. 使用 AJAX 请求

const fileUrl = 'http://example.com/file-to-download.pdf';

const xhr = new XMLHttpRequest();
xhr.open('GET', fileUrl, true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = new Blob([xhr.response], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = 'downloaded-file.pdf';
    link.click();

    URL.revokeObjectURL(url);
  }
};

xhr.send();

这段代码使用 XMLHttpRequest 发起 GET 请求，并设置 responseType 为 'blob'，以获取文件数据。然后，我们创建一个 Blob 对象，将 AJAX 响应的数据包装为二进制文件。接下来，我们创建一个临时的 URL，并将其赋值给 <a> 元素的 href 属性，同时设置 download 属性为要保存的文件名。最后，我们同样模拟用户点击链接的行为，触发文件下载。

总结

以上两种方法都可以实现前端下载文件而不弹窗的效果，提升用户体验。选择哪种方法取决于具体的需求和场景。