文件下载
1.一般我们下载文件基本会使用a标签下载

<a href="xxxx.txt" download="文件名.txt">点击下载</a>

js方式
var aTag = document.createElement('a')
		aTag.download = '你的文件名'
        aTag.href = '你的文件地址'
        aTag.click() // 执行一次a标签的点击事件

但是有个问题,当浏览器可以打开这些文件的时候,a标签会进行一个跳转,比如路径是音频文件时,会跳转播放音频。而且a标签下载一般作为文件和页面在同一个域下使用,也就是文件和页面在同一服务器,且地址为相对地址。

2.window.location.href和window.location
我们使用window.location.href有时是可以下载文件的,注意是“有时”,当文件是可以被浏览器读取跳转时,页面会跳转到相应页面读取文件内容和读取音频文件相似。

	window.location.href在IE下需要兼容一般处理为
	window.location.href = urls?name=xxx
	部分火狐版本不支持window.location.href 
	所以兼容火狐和IE写成window.location= urls?name=xxx
	window.location.href = urls; // 本窗口打开下载
	window.open(urls, '_blank'); // 新开窗口下载

3.使用API提供的Blob下载《会出现文件损坏,未解决》

	let fileName = xxx.mp3 // 文件地址
	let downName = (new Date()).getTime()+".mp3" // 文件下载名称
      const blob = new Blob([fileName])
      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)
      }

4.使用后台接口 用1和2的两种方式下载

Logo

前往低代码交流专区

更多推荐