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()
相关推荐
莪_幻尘2 小时前
Skill 体检:30 个 Skill 全凭感觉?体检器先自曝了 8 个“假 0 分
前端·人工智能·llm
风骏时光牛马2 小时前
AI模型综合能力评测:性能、指令遵循与多场景实测对比
前端
Frag0ut2 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析
前端·chrome·windows·web安全·chromium·gemini ai·playready drm
hiahiahia1232 小时前
实现完整 Tool Dispatcher
开发语言·前端
IT_陈寒2 小时前
Java线程池这破玩意,差点让我周末加班排查到凌晨
前端·人工智能·后端
Mr_Mao3 小时前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了
前端·javascript·react.js
泡海椒4 小时前
趋势分析报表:jquick-pdf折线图PDF生成实战
java·大数据·运维·服务器·前端·pdf
默_笙4 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判
前端·javascript
YIAN4 小时前
从跨域代理到 WebSocket:梳理前端实时通信的底层逻辑与完整实践
前端·websocket
一曲终散4 小时前
创建 SVG 图标预览页面:从零实现到解决 CORS 问题
前端