js实现pdf下载文件
使用原生JavaScript实现PDF下载
在浏览器中下载PDF文件可以通过创建<a>标签并设置download属性来实现。以下是一个简单的示例：
function downloadPDF(url, fileName) {
const a = document.createElement('a');
a.href = url;
a.download = fileName || 'document.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}使用Blob对象下载动态生成的PDF
如果需要下载动态生成的PDF内容，可以使用Blob对象：
function downloadPDFFromBlob(pdfBlob, fileName) {
const url = URL.createObjectURL(pdfBlob);
const a = document.createElement('a');
a.href = url;
a.download = fileName || 'document.pdf';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}使用fetch API下载远程PDF
从服务器获取PDF文件并下载：
async function downloadRemotePDF(pdfUrl, fileName) {
try {
const response = await fetch(pdfUrl);
const blob = await response.blob();
downloadPDFFromBlob(blob, fileName);
} catch (error) {
console.error('Error downloading PDF:', error);
}
}使用PDF库生成并下载PDF
使用jsPDF库动态生成PDF并下载：
// 首先引入jsPDF库: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
function generateAndDownloadPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text('Hello World!', 10, 10);
doc.save('example.pdf');
}处理跨域问题
如果PDF资源位于不同域，可能需要服务器设置CORS头部：
// 服务器应设置响应头
// Access-Control-Allow-Origin: *
// 或指定允许的域名注意事项
- 某些浏览器可能会阻止自动下载，需要用户交互触发
- 移动设备上的下载行为可能有所不同
- 大文件下载应考虑使用进度指示器
- 确保服务器正确设置PDF文件的Content-Type为application/pdf
