使用js下载文件的各项方式

js下载的本质其实无非是让浏览器接收一个流文件,而一般情况下前端下载功能实现直接就可以使用html里面有专门下载标签,各项属性配一下就好了,但是有时候需要基于反爬虫、安全方面的考虑或者需求上的下载触发,是一个未知的结果等等,这个时候就需要js来处理了。最近也遇到了类似的问题,写个参考集合记录一下

  • 直接打开的方式
var url = "https://xxxxx.txt" // 下载地址
window.open(url);
  • 本地
window.location.href =  "https://xxxxx.txt" 
  • 创建一个form下载,提交表单的方式
var url = "https://xxxxx.txt" // 下载地址
var params  = '123' // 参数  
// 创建form表单
var formHtml = "<form method='post' style='display:none' id='formDownId' action='"+ url +">" + "<input type='hidden' value='" + params + "'></form>"
var initHtml = document.createElement("div")
initHtml.innerHTML = formHtml
// 将form表单放入指定位置
document.body.appendChild(initHtml)
//操作dom,下载文件
document.getElementById("formDownId").submit()
// 下载完成,删除该form
document.body.removeChild(initHtml)
  • 创建a标签的方式下载
var url =  "https://xxxxx.txt" 

1、通过点击
const a = document.createElement('a') // 创建a标签
a.setAttribute('download', '')
a.setAttribute('href', url)
a.click() // 执行点击事件

2、通过initMouseEvent属性
const htmlA = document.createElement('a')
htmlA.setAttribute("href", url)
htmlA.setAttribute('download', '')
const itsArr = document.createEvent('mouseEvents')
itsArr.initMouseEvent(
    "click",
    true,
    true,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    false,
    0,
    null
)
const returnStatus = htmlA.dispatchEvent(itsArr) // 下载结果返回

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):