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()
相关推荐
Mike_jia2 小时前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼2 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞2 小时前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子2 小时前
JS 打造动态表格
前端·javascript·面试
excel2 小时前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_02 小时前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code2 小时前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
li357410 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj10 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel11 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端