当前位置：首页 > JavaScript

js实现pdf下载

2026-01-30 14:34:00JavaScript

使用HTML5的`<a>`标签下载PDF

通过创建一个隐藏的<a>标签，设置href为PDF文件的URL或Blob对象，并添加download属性触发下载。适用于已知PDF文件URL的场景。

const downloadPDF = (url, filename) => {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'document.pdf';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 使用示例
downloadPDF('https://example.com/file.pdf', 'custom_name.pdf');

通过Blob对象生成PDF下载

当PDF数据需要通过API获取或动态生成时，可将响应数据转换为Blob对象，再通过URL.createObjectURL创建临时链接下载。

const downloadPDFFromBlob = (blobData, filename) => {
  const blob = new Blob([blobData], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'document.pdf';
  document.body.appendChild(link);
  link.click();
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 100);
};

// 使用示例（假设从API获取数据）
fetch('https://api.example.com/generate-pdf')
  .then(response => response.blob())
  .then(blob => downloadPDFFromBlob(blob));

使用jsPDF库动态生成PDF

对于需要前端动态生成PDF内容的场景，可使用jsPDF库。先通过npm安装或CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  doc.text('Hello World!', 10, 10);
  doc.save('generated.pdf');
</script>

或通过npm安装后使用：

import { jsPDF } from "jspdf";
const doc = new jsPDF();
doc.text("Dynamic PDF Content", 10, 10);
doc.save("dynamic-document.pdf");

使用PDFKit在Node.js环境生成PDF

服务器端生成PDF可通过PDFKit实现，需配合文件系统模块保存或发送文件：

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.fontSize(25).text('Node.js PDF Generation', 100, 100);
doc.end();

处理跨域下载问题

当PDF资源存在跨域限制时，需确保服务器配置CORS头部，或通过代理服务器获取资源。对于需要认证的场景，需在请求头中添加授权信息：

js实现pdf下载

fetch('https://protected-api.example.com/pdf', {
  headers: { 'Authorization': 'Bearer token' }
})
.then(response => response.blob())
.then(blob => downloadPDFFromBlob(blob));