a标签实现文件下载；a标签下载文件header中带上用于鉴权的token；文件下载过大提示,网络出错

最新推荐文章于 2024-08-07 09:18:01 发布

s_turnTurn

最新推荐文章于 2024-08-07 09:18:01 发布

阅读量5k

点赞数 2

文章标签： javascript jquery

本文链接：https://blog.csdn.net/s_turnTurn/article/details/107231181

版权

一、a标签实现文件下载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文件下载</title>
</head>
<body>
  <!-- href中直接引入要下载的文件即可 -->
  <a href="1.docx">下载</a>
  <!-- 点击按钮下载 -->
  <button onclick="dealDownLoad('1.docx')">下载</button>
<script>
  function dealDownLoad(url){
    var link = document.createElement("a");
    link.href = url;
    link.download = ""
    link.click();
  }
</script>
</body>
</html>

二、实现下载文件header中带上用于鉴权的token

1.方式1用的是原生的XmlHttpRequest

2.方式2用的是vue常用的axios

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>文件下载</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <a href="#" class="download-url">下载</a>
  <script>
    //方式1
    $(".download-url").on("click", function (event) {
      event.preventDefault();//使a自带的方法失效，即无法调整到href中的URL
      var url = '';   //请求的URl,接口
      var xhr = new XMLHttpRequest();		//定义http请求对象
      xhr.open("post", url, true);//根据接口使用请求方式
      xhr.responseType = "blob";  // 返回类型blob
      xhr.setRequestHeader("accessToken", "此处获取token");
      xhr.setRequestHeader("Content-type", "application/application/octet-stream");
      //定义请求完成的处理函数,请求前可以增加加载框/禁用下载按钮逻辑
      xhr.onload = function () {
        if (this.status === 200) {
          //请求完成
          var blob = this.response;
          var reader = new FileReader();
          reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a标签href
          reader.onload = function (e) {
            console.log(e);			//查看有没有接收到数据流
            // 转换完成，创建一个a标签用于下载
            var a = document.createElement('a');
            a.download = '';			//此处填写文件地址
            a.href = e.target.result;
            $("body").append(a);    // 修复firefox中无法触发click
            a.click();
            $(a).remove();
          }
        }
        else {
          alert("出现了未知的错误!");
        }
      }
      xhr.send();
    });

        //方式2
		/*$(".download-url").on("click",function(event){
			event.preventDefault();//使a自带的方法失效，即无法调整到href中的URL
			axios({
				method: 'post',
				url: "http://localhost:8050/file/export/snapEventVO",
				responseType: 'blob'
			}).then((res) => {
				const link = document.createElement('a')
				let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
			//获取heads中的filename文件名
			var aa = res.headers["content-disposition"]
			let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
			var fileName = decodeURIComponent(temp);
			console.log(fileName)
			link.style.display = 'none'
			link.href = URL.createObjectURL(blob);
			link.setAttribute('download', fileName)
			document.body.appendChild(link)
			link.click()
			document.body.removeChild(link)
		}).catch(error => {
				console.log(error)
			})
		});
*/
  </script>

</body>

三、使用第二种方式,当文件过大时,点击下载提示:文件下载失败-网络错误

原因:截取尺寸较大导致生成base64长度太大,达到a标签的href上限
解决方案:将base64 dataURL转换为Blob文件对象

将 a.href = e.target.result; 改成  
a.href = URL.createObjectURL(dataURLToBlob(e.target.result));
如果是谷歌浏览器的话为
a.href = webkitURL.createObjectURL(dataURLToBlob(e.target.result));
function dataURLToBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}