使用new Blob实现文件流下载和上传

最新推荐文章于 2024-05-14 10:49:01 发布

C+ 安口木

最新推荐文章于 2024-05-14 10:49:01 发布

阅读量1w

点赞数 6

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_50367873/article/details/118553770

版权

前端开发专栏收录该内容

138 篇文章 12 订阅

订阅专栏

文件流下载

后端返回的文件流
在这里插入图片描述

注意：responseType应设置为：‘arraybuffer’，这样返回的文件流才会是二进制的，才能使用new Blob得到正确的文件

this.$axios
  .post(url接口地址, params请求参数, {
    headers: {
      token: token
    },
    responseType: "arraybuffer"
  })
  .then((file) => {
    let content = file.data;
    // 组装a标签
    let a= document.createElement("a");
    // 设置下载文件名
    a.download = "附件.zip";
    a.style.display = "none";
    let blob = new Blob([content], {type: "application/zip"})
    a.href = URL.createObjectURL(blob);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  })

==下载Excel ==>type: “application/vnd.ms-excel”

原生js

let a = document.createElement('a');
 //ArrayBuffer 转为 Blob
 let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); 
 let objectUrl = URL.createObjectURL(blob);
 a.setAttribute("href",objectUrl);
 a.setAttribute("download", '计划单电子表格.xls');
 a.click();

原生js使用new Blob()实现带格式导出excel

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table id="table" border="1">
		<tr style="height:50px;">
			<th style="width:100px;color:red;">姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>16</td>
		</tr>
		<tr>
			<td>小红</td>
			<td>女</td>
			<td>17</td>
		</tr>
		<tr>
			<td>小张</td>
			<td>男</td>
			<td>17</td>
		</tr>
	</table>
	<a id="down">点击下载excel</a>
	<script>
		//或者是body的innerHTML
		let html = document.getElementById("table").outerHTML;
		let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
		let a = document.getElementById('down');
		a.href = URL.createObjectURL(blob);
		a.download = '测试excel下载'
	</script>
</body>
</html>

vue导出下载

async downLoad() {
      await request({
        url: 'xxxxxx/getExcel',
        method: 'get',
        responseType: 'blob'
      })
        .then(res => {
          const blob = new Blob([res.data], {
            type: 'application/octet-stream'
          });
          if (window.navigator.msSaveOrOpenBlob) {
            // msSaveOrOpenBlob方法返回boolean值
            navigator.msSaveBlob(blob, '订单列表.xls');
            // 本地保存
          } else {
            const link = document.createElement('a'); // a标签下载
            link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
            link.download = '作品列表.xls'; // dowload属性指定文件名
            link.click(); // click()事件触发下载
            window.URL.revokeObjectURL(link.href); // 释放内存
          }
          this.getData();
        });
    }

上传==>Content-Type: multipart/form-data;

1.使用form表单提交

<form action="请求地址" method="请求类型" enctype="multipart/form-data">
    <input type="file" name="">
    <input type="text" name="">
    <input type="submit" value="提交">
</form>

2.使用编程式FormData对象

var file = e.target.files[0];
    var form = new FormData();
    form.append("file", file); //第一个参数是后台读取的请求key值
    form.append("fileName", file.name);
    form.append("errorType", "1"); //实际业务的其他请求参数
    form.append('webmasterfile',oBlob);    //二进制对象 
     //原生的xhr请求
    var xhr = new XMLHttpRequest();
    var url= "http://localhost:8080/upload.do"; //上传服务的接口地址
    xhr.open("POST", url);
    xhr.send(form); //发送表单数据
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4 && xhr.status==200){
        var resultObj = JSON.parse(xhr.responseText);
        //处理返回的数据......
      }
    }
    //项目封装axios请求
    uploadAjax(form).then(({ data: res }) => {
        console.log(res);
      });

使用formData表单上传时axios会默认设置 headers: { ‘Content-Type’: ‘multipart/form-data’ }

C+ 安口木

关注

6
点赞
踩
35

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用new Blob实现文件流下载和上传

注意：responseType应设置为：‘arraybuffer’，这样返回的文件流才会是二进制的，才能使用new Blob得到正确的文件this.$axios .post(url接口地址, params请求参数, { headers: { token: token }, responseType: "arraybuffer" }) .then((file) => { let content = file.data; // 组装a标签
复制链接

扫一扫