JS实现文档下载兼容谷歌、火狐、IE

js文件下载？简单啊，a标签的download属性，然后点击即下载。
http://www.w3school.com.cn/tags/att_a_download.asp
官方也说了只有 Firefox 和 Chrome 支持 download 属性。
那我IE11怎么办，于是我开始了无尽的百度与尝试。

// 方法一：window.open没用，只是打开文件。
let output = '/static/download/aaa.txt'
let downloadFileName = 'testa'
if (window.navigator.msSaveBlob) {
   // for ie 10 and later
   try {
       let blobObject = new Blob([output])
       window.navigator.msSaveBlob(blobObject, downloadFileName)
   } catch (e) {
       console.log(e)
   }
} else {
   let file = 'data:text/plain;charset=utf-8,'
   let logFile = output
   let encoded = encodeURIComponent(logFile)
   file += encoded
   let a = document.createElement('a')
   a.href = file
   a.target = '_blank'
   a.download = downloadFileName
   document.body.appendChild(a)
   a.click()
   a.remove()
}

// 方法二：iframe没用，只是打开没用下载功能。
let elemIF = document.createElement('iframe')
elemIF.style.display = 'none'
elemIF.src = '/static/download/aaa.txt'
document.body.appendChild(elemIF)
elemIF.click()

// 方法三：IE11的msSaveOrOpenBlob函数估计有效，但是这个通常用于将页面内容获取写入fileContent，然后下载，然而我是已存在文件aaa.txt。
let fileName = '/static/download/aaa.txt' // 文件地址
let downName = 'test' // 文件下载名称
const blob = new Blob([fileContent])
if (window.navigator.msSaveOrOpenBlob) {
   // 兼容IE10
   navigator.msSaveBlob(blob, downName)
} else {
   // chrome/firefox
   let aTag = document.createElement('a')
   aTag.download = downName
   aTag.href = URL.createObjectURL(blob)
   aTag.click()
   URL.revokeObjectURL(aTag.href)
}

// 方法四：execCommand('SaveAs')没用，保存整个网页可能有用吧，没有尝试成功。
let oPop = window.open('/static/download/aaa.txt', '', 'width=500, height=500, top=5000, left=5000')
for (; oPop.document.readyState !== 'complete';) {
   if (oPop.document.readyState === 'complete') {
       break
   }
}
oPop.document.execCommand('SaveAs')
oPop.close()

// 方法五：同事的系统有用然而我这不起作用，说白了还是创建了一个a标签，不应该有用不知道他们系统为什么可以。
let obj = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
obj.href = '/static/download/aaa.txt'
obj.download = 'test.txt'
let ev = document.createEvent('MouseEvents')
ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
obj.dispatchEvent(ev)

// 方法六：window.location.href没用，只是打开文件。
// window.location.href = '/static/download/aaa.txt'

// 方法七：最初提到的常用的a标签方法，IE不支持
let url = '/static/download/aaa.txt'
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'aaa.txt')
document.body.appendChild(link)
link.click()

// 方法八：最后还是调用了后台的下载接口，适用于所有浏览
let url = this.$_apiUrl.download
window.open(url + '?name=aaa.txt')

注意：此处默认是get请求。

JS实现文档下载兼容谷歌、火狐、IE相关推荐

Java8中文api汉化文档下载【谷歌翻译最精准版】【jdk api 1.8_google.CHM】
Java8中文api汉化文档下载[谷歌翻译最精准版][jdk api 1.8_google.CHM] 这是Java8的汉化文档,谷歌翻译非常精准! 需要的同学微信扫码发送关键字 api8 即可获取下载 ...
js导出word文档可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
从转载阿里开源项目 Egg.js 技术文档引发的“版权纠纷”，看宽松的 MIT 许可该如何用？
作者 | 苏宓.彭慧中出品 | CSDN(ID:CSDNnews) 开源迅速发展的这两年,很多内部问题逐渐凸显出来,如安全.版权.协议使用等. 近日,来自V2EX社区中一位开发者 @an168ban ...
帝国cms把网站文章内容生成word文档下载插件
帝国cms把网站文章内容生成word文档下载插件插件介绍 jQuery Word Export是一款可以将网页中的文字导出到微软Word文档中的jQuery插件.它通过FileSaver.js文件来 ...
纯前端vue利用docxtemplater实现生成word文档下载 word模板，勾选框的默认勾选。。
首先需要下载如下工具: cnpm i docxtemplater pizzip jszip-utils file-saver -S 然后将它们引入: import JSZipUtils from &q ...
优学院只阅读不提供下载的文档下载
优学院文档下载 https://ua.ulearning.cn/course_web/index.html?from=groupmessage#/main/article/10398/960/0 点开 ...
minio 简介、中文文档、中英对照文档下载
minio 文档下载链接(含jar包.源码.pom) 组件名称中文-文档-下载链接中英对照-文档-下载链接 minio-8.0.3.jar minio-8.0.3-API文档-中文版.zip m ...
将vue文档下载到本地预览
将vue文档下载到本地预览由于vue文档在服务器在国外,因此访问速度较慢,为了方便文档查看,可以将文档下载到本地预览步骤到vue的GitHub仓库下载文档源码下载node.js和git安装到本 ...
jQuery1·3中文参考文档下载
现在才接触jQuery,看来我是很火星了. 附上jQuery1·3中文参考文档下载:http://files.cnblogs.com/conan304/jQueryAPI_CHM.zip 转载于:h ...

JS实现文档下载兼容谷歌、火狐、IE

JS实现文档下载兼容谷歌、火狐、IE相关推荐

最新文章

热门文章