JS下载文件|无刷新下载文件示例代码是一种实现在前端页面中通过JavaScript代码实现下载文件的方法。下面,我将会详细讲解如何实现这个功能,过程中会提供两条示例说明。
要实现通过JS实现下载文件的功能,我们需要通过创建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);
}
}
我们以下载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();
});
我们以下载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代码下载文件的功能。
本文链接:http://task.lmcjl.com/news/9591.html