JS下载文件|无刷新下载文件示例代码

JS下载文件|无刷新下载文件示例代码是一种实现在前端页面中通过JavaScript代码实现下载文件的方法。下面，我将会详细讲解如何实现这个功能，过程中会提供两条示例说明。

1. 实现思路

要实现通过JS实现下载文件的功能，我们需要通过创建XMLHttpRequest对象实现文件下载。

具体的实现过程如下：

1. 创建XMLHttpRequest对象。
2. 通过XMLHttpRequest对象向服务器端发送请求，获取文件的二进制流。
3. 将获取到的二进制流通过Blob对象写入到本地文件中。
4. 使用a标签的download属性，将文件下载到本地。

2. 实现步骤

第一步：创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

第二步：向服务器发送请求

xhr.open('GET', 'http://example.com/file.pdf', true);
xhr.responseType = 'arraybuffer';
xhr.send();

第三步：处理二进制流数据

xhr.onload = function () {
  if (this.status === 200) {
    var blob = new Blob([xhr.response], { type: 'application/pdf' });
    var fileName = 'file.pdf';
    saveAs(blob, fileName);
  }
};

第四步：下载文件到本地

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;
    link.style.display = 'none';
    body.appendChild(link);
    link.click();
    body.removeChild(link);
  }
}

3. 示例说明

示例1：下载PDF文件

我们以下载PDF文件为例，创建一个下载按钮，在按钮点击事件中触发JS代码实现文件下载。

<button id="downloadPDF">下载PDF文件</button>

document.querySelector('#downloadPDF').addEventListener('click', function () {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://example.com/file.pdf', true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    if (this.status === 200) {
      var blob = new Blob([xhr.response], { type: 'application/pdf' });
      var fileName = 'file.pdf';
      saveAs(blob, fileName);
    }
  };
  xhr.send();
});

示例2：下载JSON文件

我们以下载JSON文件为例，创建一个下载按钮，并在按钮点击事件中触发JS代码实现文件下载。

<button id="downloadJSON">下载JSON文件</button>

document.querySelector('#downloadJSON').addEventListener('click', function () {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://example.com/file.json', true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    if (this.status === 200) {
      var blob = new Blob([xhr.response], { type: 'application/json' });
      var fileName = 'file.json';
      saveAs(blob, fileName);
    }
  };
  xhr.send();
});

通过以上两个示例，我们就可以实现在前端页面中通过JS代码下载文件的功能。