首页 前端知识 js如何不预览直接下载pdf文件

js如何不预览直接下载pdf文件

2024-03-17 00:03:26 前端知识 前端哥 913 123 我要收藏

文章目录

  • 一、为什么不能直接下载
  • 二、如何下载


一、为什么不能直接下载

由于谷歌浏览器机制问题,pdf文件下载和图片下载会有区别,paf文件会打开一个预览页面,在预览页点击下载按钮下载。

二、如何下载

由于pdf文件通过a标签直接下载会打开页面,所以,请求该文件的blob文件流数据,再通过window.URL.createObjectURL转成链接,就可以直接下载了。
只需要替换url和文件名称就行,文件名的后缀记得要写上pdf,不然会变成txt文件。
注意:不能跨域,可以把文件上传到后端服务器,就不会跨域了。还可以用跨域代理处理。

let url = 'http://cn.createpdfonline.org/pdffiles/111(20230922113416).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()
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3866.html
标签
pdf
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!