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()
相关推荐
大文说跨境几秒前
亚马逊多店铺用过多款指纹浏览器,说点长期用的实际感受
前端·网络
中屹指纹浏览器svip10 分钟前
中屹指纹浏览器和普通 Chrome 有什么区别?
前端·chrome·中屹指纹浏览器
feixing_fx26 分钟前
CSS Grid 入门:二维布局时代的降维打击
前端·css·前端框架·css3
Lank_M31 分钟前
JPG的8×8块里只要有条边,白底就保不住255
前端
coding漫漫长路34 分钟前
主图纯白检测,阈值放宽到250会放过252的底
前端
计算机魔术师34 分钟前
藏了八个月没被当漏洞的洞,AI红队一晚上翻出来了
前端
用户831348593069836 分钟前
Vue3 v-for:常用用法与开发高频坑点
前端·javascript·vue.js
用户6210075870240 分钟前
Web 3D 开发实践:BIM+GIS 融合需要解决哪些技术问题?
前端·three.js
志尊宝40 分钟前
AI原生前端开发(017):端侧AI与Vue 3结合实战
前端·人工智能·prompt·1024·ai-native
钱栈up41 分钟前
配料秤料位查出来是负数——IoTDB存的是周期增量,我却在拿首尾相减
前端·数据库