前言
在前端开发中,有时需要让用户下载文件,比如下载PDF文档、Excel表格等。这时候,我们可以使用JavaScript来实现文件下载功能。本文将介绍几种常用的前端JS下载文件的方法,包括XMLHttpRequest、Fetch API、Blob、FileSaver.js等。
最简单的使用a标签:
/*docx格式此处加上download,用于下载;
如果是pdf,去除download,可以用于预览(用户可见,需要点击操作)*/
<a download={item.title}
href={item.pdf || '/#'}
target={item.pdf ? "_blank" : ''}
rel="noreferrer"
onClick={(e) => !item.pdf && e.preventDefault()}
// 也可以使用动态创建a标签来进行下载(无需操作,执行即下载)
// 这里的文件名根据实际情况从响应头或者url里获取
const filename = name || 'xxx.pdf';
const a = document.createElement('a');
a.href = 链接;
a.download = filename;
a.click();
window.URL.revokeObjectURL(链接);
>
方法一:使用XMLHttpRequest对象
使用XMLHttpRequest对象可以发送HTTP请求,获取文件内容,然后使用Blob对象创建一个URL,最后将下载链接的href属性设置为这个URL。以下是具体的代码示例:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.pdf', true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
var blob = xhr.response;
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'file.pdf';
a.click();
}
};
xhr.send();
这里的xhr.responseType属性设置为blob,表示响应内容为二进制数据。当请求成功后,我们可以使用xhr.response获取文件内容,然后使用URL.createObjectURL()方法创建一个URL,最后创建一个a元素,将其href属性设置为这个URL,并设置download属性为文件名,这样就可以触发文件下载操作了。
需要注意的是,由于浏览器的安全限制,只有在用户主动触发下载操作时,才能成功下载文件。
方法二:Fetch API
Fetch API是一种新的发送HTTP请求的方法,可以用来下载文件。具体来说,可以使用Fetch API发送HTTP请求,获取文件内容,然后使用Blob对象创建一个URL,最后将下载链接的href属性设置为这个URL。以下是一个简单的示例:
fetch('file.pdf')
.then(function(response) {
return response.blob();
})
.then(function(blob) {
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'file.pdf';
a.click();
});
这里的new Blob()方法创建一个Blob对象,第一个参数为文件内容,第二个参数为文件类型。当创建成功后,我们可以使用URL.createObjectURL()方法创建一个URL,最后创建一个a元素,将其href属性设置为这个URL,并设置download属性为文件名,这样就可以触发文件下载操作了。
方法三:Blob
Blob是一种表示二进制数据的对象,可以用来下载文件。具体来说,可以使用Blob对象创建一个URL,然后将下载链接的href属性设置为这个URL。以下是一个简单的示例:
var content = 'Hello, world!';
var blob = new Blob([content], { type: 'text/plain' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();
这里的new Blob()方法创建一个Blob对象,第一个参数为文件内容,第二个参数为文件类型。当创建成功后,我们可以使用URL.createObjectURL()方法创建一个URL,最后创建一个元素,将其href属性设置为这个URL,并设置download属性为文件名,这样就可以触发文件下载操作了。
方法四:使用FileSaver.js库
FileSaver.js是一个用于在浏览器中保存文件的JavaScript库,可以用来下载文件。具体来说,它提供了一种简单的方式来将数据保存到本地文件中,支持多种文件格式,包括文本文件、JSON文件、Blob对象等。以下是具体的代码示例:
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
var data = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });
saveAs(data, 'hello.txt');
在上面的示例中,我们首先创建了一个Blob对象,表示要保存的数据。然后,我们调用saveAs()方法,将数据保存到本地文件中。第一个参数是要保存的数据,第二个参数是文件名。
除了Blob对象,FileSaver.js还支持其他类型的数据,例如字符串、ArrayBuffer等。它还提供了一些其他的API,例如saveText()、saveBlob()等,用于保存不同类型的数据。
需要注意的是,FileSaver.js并不是所有浏览器都支持的,一些旧版本的浏览器可能无法正常使用它。因此,在使用FileSaver.js时,需要进行兼容性测试,确保它能够在目标浏览器中正常工作。
方法五:使用iframe元素下载文件
使用iframe元素下载文件的方式比较简单,只需要将src属性设置为文件的URL即可。例如:
<iframe src="file.pdf" style="display: none;"></iframe>
这里的style属性设置为display: none;,表示不显示iframe元素。
需要注意的是,由于浏览器的安全限制,只有在用户主动触发下载操作时,才能成功下载文件。因此,我们需要在点击事件中,将iframe元素的src属性设置为文件的URL,从而触发文件下载操作。例如:
var downloadLink = document.getElementById('downloadLink');
downloadLink.addEventListener('click', function() {
var iframe = document.createElement('iframe');
iframe.src = 'file.pdf';
iframe.style.display = 'none';
document.body.appendChild(iframe);
});
这里的document.body.appendChild(iframe)表示将iframe元素添加到文档中,从而触发文件下载操作
需要注意的是,文件下载操作可能会涉及到跨域问题,需要在服务器端进行相应的配置。另外,不同浏览器对于文件下载的支持也有所不同,需要进行兼容性测试。
最后,需要注意的是,在进行文件下载操作时,应该遵循相关的法律法规,不得下载侵犯他人权益的文件。
方法六:使用元素下载文件
使用元素下载文件的方式也比较简单,只需要创建一个表单,将action属性设置为文件的URL,将method属性设置为GET,然后提交表单即可。例如:
这里的style属性设置为display: none;,表示不显示表单。需要注意的是,由于浏览器的安全限制,只有在用户主动触发下载操作时,才能成功下载文件。因此,我们需要在点击事件中,将表单提交,从而触发文件下载操作。例如:
var downloadLink = document.getElementById('downloadLink');
downloadLink.addEventListener('click', function() {
var form = document.createElement('form');
form.action = 'file.pdf';
form.method = 'GET';
form.style.display = 'none';
document.body.appendChild(form);
form.submit();
});
这里的document.body.appendChild(form)表示将表单添加到文档中,从而触发文件下载操作。
写在最后
需要注意的是,文件下载操作可能会涉及到跨域问题,需要在服务器端进行相应的配置。另外,不同浏览器对于文件下载的支持也有所不同,需要进行兼容性测试。
最后,需要注意的是,在进行文件下载操作时,应该遵循相关的法律法规,不得下载侵犯他人权益的文件。