js实现pdf下载文件
使用原生JavaScript实现PDF下载
在浏览器环境中，可以通过创建Blob对象和URL来实现PDF文件的下载。以下是几种常见方法：
方法一：使用fetch API获取PDF并下载
fetch('your-pdf-url.pdf')
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'filename.pdf';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
});方法二：直接通过已知的PDF数据创建Blob
const pdfData = ...; // 获取PDF二进制数据
const blob = new Blob([pdfData], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'document.pdf';
link.click();使用第三方库实现PDF生成与下载
对于需要动态生成PDF的场景，可以使用jsPDF库：
// 引入jsPDF库后
const doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('example.pdf');处理大文件下载的进度显示
对于大文件下载，可以添加进度提示：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'large-file.pdf', true);
xhr.responseType = 'blob';
xhr.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(percentComplete + '% downloaded');
}
};
xhr.onload = function() {
if (this.status === 200) {
const blob = new Blob([this.response]);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'large-file.pdf';
a.click();
}
};
xhr.send();跨浏览器兼容性注意事项
不同浏览器对下载行为的处理可能不同：
- Chrome和Firefox通常支持直接下载
- Safari可能需要用户显式交互（如点击事件）
- 移动端浏览器可能有额外限制
确保下载操作由用户触发的事件（如click）发起，以避免被浏览器拦截。
