当前位置：首页 > JavaScript

js实现pdf下载文件

2026-01-30 20:18:03JavaScript

使用原生JavaScript实现PDF下载

在浏览器环境中，可以通过创建Blob对象和URL来实现PDF文件的下载。以下是几种常见方法：

方法一：使用fetch API获取PDF并下载

js实现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库：

js实现pdf下载文件

// 引入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();