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()
相关推荐
暴走的小呆1 分钟前
为什么react要从顶层更新
前端
仰望星空的小猴子12 分钟前
React18和React19新特性
前端
小码哥_常14 分钟前
Android新航标:Navigation 3为何成为变革先锋?
前端
SuperEugene14 分钟前
Vue状态管理扫盲篇:状态管理中的常见坑 | 循环依赖、状态污染与调试技巧
前端·vue.js·面试
骑着小黑马16 分钟前
从 Electron 到 Tauri 2:我用 3.5MB 做了个音乐播放器
前端·vue.js·typescript
进击的尘埃16 分钟前
前端大文件上传全方案:切片、秒传、断点续传与 Worker 并行 Hash 计算实践
javascript
aykon16 分钟前
DataSource详解以及优势
前端
Mintopia16 分钟前
戴了 30 天智能手环后,我才发现自己一直低估了“睡眠”
前端
leolee1816 分钟前
react redux 简单使用
前端·react.js·redux
仰望星空的小猴子18 分钟前
常用的Hooks
前端