JS下载PDF文件

该文章介绍了一个JavaScript函数downloadPDF,它接受URL和文件名作为参数,通过fetchAPI获取资源,转换为blob,然后利用window.URL.createObjectURL创建可下载的链接,实现从给定地址直接下载文件的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

封装成了一个函数,只需传入地址和下载后的文件名

使用方法:downloadPDF(‘http://example.com/file.pdf’, ‘filename.pdf’);
function downloadPDF(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    });
}

### 如何使用 pdf.js 下载 PDF 文件 为了实现通过 `pdf.js` 库下载 PDF 文档的功能,可以利用 JavaScript 的 Blob 对象以及 URL 创建 API 来完成此操作。下面是一个具体的例子来说明这一过程: ```javascript // 加载远程PDF文件 const url = 'your_pdf_file.pdf'; let loadingTask; function downloadPdf() { // 初始化加载任务 loadingTask = pdfjsLib.getDocument(url); // 处理加载成功的回调函数 loadingTask.promise.then(function(pdf) { console.log('Document loaded'); // 获取第一个页面作为示例(如果只需要下载整个文档,则不需要这一步) let pageNumber = 1; pdf.getPage(pageNumber).then(function(page) { // 此处仅用于获取单页内容,对于整份文档的下载可省略 // 开始实际下载逻辑 fetch(url) .then(response => response.blob()) .then(blob => { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = "downloaded_document.pdf"; // 设置下载后的文件名 document.body.appendChild(link); // Firefox 需要添加到 DOM 中才能触发点击事件 link.click(); document.body.removeChild(link); // 移除临时创建的 a 标签 console.log('Download completed.'); }) .catch(error => console.error('Error during downloading:', error)); }); }, function(reason) { console.error('Error: ' + reason); }); } ``` 上述代码展示了如何定义一个名为 `downloadPdf()` 的函数[^1],该函数负责发起对指定 URL 地址所指向 PDF 文件的请求,并将其转换成浏览器能够识别的数据形式——Blob对象;之后再借助 HTML5 提供的新特性 `<a>`标签配合其属性 `href` 和 `download` 实现自动保存功能。 需要注意的是,在某些情况下可能还需要处理跨源资源共享(CORS)问题,确保服务器端配置允许来自客户端网页的应用程序访问资源[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值