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代码下载文件的功能。