JS实现直接下载PDF文件

pdf文件通过a标签直接下载会打开页面,所以,请求该文件的blob文件流数据,再通过window.URL.createObjectURL转成链接,就可以直接下载了。

只需要替换url和文件名称就行,文件名的后缀记得要写上pdf,不然会变成txt文件。
注意:不能跨域,可以把文件上传到后端服务器,就不会跨域了。还可以用跨域代理处理。

javascript 复制代码
let url = 'http://xxxxxxxxx.pdf'
let name = '实例.pdf'
 // 发送http请求,将文件链接转换成文件流
 let xhr = new XMLHttpRequest()
 xhr.open('get', url, true)
 // 请求类型
 xhr.responseType = 'blob'
 xhr.onreadystatechange = function() {
 	// 获取接口结果
     if (xhr.readyState === 4 && xhr.status === 200) {
       window.URL = window.URL || window.webkitURL
       let a = document.createElement('a')
       let blob = new Blob([xhr.response])
       // 通过二进制文件创建url
       let url = window.URL.createObjectURL(blob)
       a.href = url
       a.download = name
       a.click()
       // 销毁创建的url
       window.URL.revokeObjectURL(url)
     }
 }
 xhr.send()
相关推荐
treasure1408 小时前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
jay神9 小时前
基于 YOLOv8 的手势识别系统(Web 版)
前端·人工智能·python·深度学习·yolo·计算机视觉·计算机毕业设计
屏什么录9 小时前
长时间录屏中途崩溃:MP4 打不开的 6 种救回方案与参数设置
前端·音视频开发
code_Bo10 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen10 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye10 小时前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程
X1A0RAN11 小时前
PPT 图片批量处理教程:导出全部幻灯片 · 提取全部素材
开发语言·javascript·powerpoint
涛涛ing11 小时前
2026年最值得关注的前端变化,藏在“默认值”里
前端
量化分析码农12 小时前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
亿元程序员13 小时前
太牛了!这AI做出来的游戏,居然还能变现!
前端