二进制流下载xlsx 展示图片(二维码)

二进制流处理：下载与展示xlsx中的图片

最新推荐文章于 2024-04-28 05:10:27 发布

原创最新推荐文章于 2024-04-28 05:10:27 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用二进制流从xlsx文件中下载并显示图片，包括二维码。通过解析xlsx文件结构，提取图片数据，并使用合适的方法将这些图片在网页上呈现。

//后端大哥说后端框架里返回的是二进制流，改不了，然后就有了下边的代码，请大家认真理解，欢迎留言沟通，随时都在



export async function downloadAttendanceRecordsTemplate(params) {
  return request(`${proxyUrl}/report/downloadAttendanceRecordsTemplate`, {
    method: "POST",
    responseType: 'blob',
    data: { ...params },
  });
}
 //下载接口
 *Downloader({ payload }, { call }) {
  	 const response = yield call(downloadAttendanceRecordsTemplate, payload);
     return response;
 },


//方法
  exportById=()=>{
    this.setState({
      loadexport:true
    })
    //const {pageData:{fromMonth,toMonth,projectId,departmentId}} = this.state;
    const {pageData:{companyId,departmentId,empKeyword,fromMonth,projectCompanyId,projectDepartmentId,projectId,toMonth}} = this.state;
    if(fromMonth||toMonth){
      this.props.dispatch({
      type:'financeRecneport/exportById',
      payload:{companyId,departmentId,empKeyword,fromMonth,projectCompanyId,projectDepartmentId,projectId,toMonth}
    }).then((res)=>{
      console.log(res)
      	//size: 8358
		//type: "application/vnd.ms-excel"
		//__proto__: Blob
      if(res&&res!==null&&res!==undefined){
        if('msSaveOrOpenBlob' in navigator){
          //ie使用的下载方式
            window.navigator.msSaveOrOpenBlob(res,`导出.xlsx`);
        }else{
          if (window.FileReader) {
            let reader = new FileReader();
            reader.readAsDataURL(res);  // 转换为base64，可以直接放入a表情href
            console.log(reader,"readerreader")
            // readyState: 2
			// result: "data:application/vnd.ms-excel;base64,UEsDBBQACAgIA"
			// error: null
			// onloadstart: null
			// onprogress: null
			// onload: ƒ (e)
			// onabort: null
			// onerror: null
			// onloadend: null
			// __proto__: FileReader
			
			//我遇到的是展示二维码
			//转换完成之后直接放到url 里就可以了；

			//下载
            reader.onload = function (e) {
                // 转换完成，创建一个a标签用于下载
                var a = document.createElement('a');
                a.download = `导出.xlsx`;
                a.href = e.target.result;
                a.target ="downloadframe";
                document.body.appendChild(a);   // 修复firefox中无法触发click
                a.click();
                document.body.removeChild(a);
            }
          }
        }
      }
      this.setState({
        loadexport:false
      })
    })
  }else{
    message.info(`请选择时间段`);
    this.setState({
      loadexport:false
    })
  }
 }

 <Button type="danger" 
 	style={{float:"right",background:"rgba(247,136,2,1)",color:"#fff",border:"none",marginLeft:"20px"}} icon="upload" onClick={()=>this.Downloader()}>下载导入工时模版</Button>