excel导出 下载弹框

实际开发中的文件下载和excel导出

在实际的开发过程中,我们经常会遇到这种需求,导出文件或者下载文件的时候,弹出保存弹框然后指定文件名或者路径然后再点保存的这种, 一般网上看到的excel文件到处,基本上看到的都是指定下载路径的,这里我针对弹框这种方式做一个说明

导出代码封装

download : function(url, params) {
		let query = '';
		if(params) 
		{
			query = '?' + Object.keys(params).map(function(key) {
                        return encodeURIComponent(key) + '=' +
						(params[key]||params[key]===0?encodeURIComponent(params[key]):'');
					}).join('&');
		}
		let iframe = document.getElementById('downloadIframe');
		if(!iframe)
		{
			iframe = document.createElement('iframe');
			iframe.id = 'downloadIframe';
			iframe.style.display = 'none';
			document.body.appendChild(iframe);
		}
		iframe.src = url+query;
        // const blob = new Blob([res]);
        // if ('download' in document.createElement('a')) { 
		// 	const elink = document.createElement('a')
		// 	elink.download = fileName;
		// 	elink.style.display = 'none';
		// 	elink.href = URL.createObjectURL(blob);
		// 	document.body.appendChild(elink);
		// 	elink.click();
		// 	URL.revokeObjectURL(elink.href);
		// 	document.body.removeChild(elink);
        // } else { 
		// 	navigator.msSaveBlob(blob, fileName);
        // }
	},

前端代码

exportExcel(){
    //获取弹框,并且弹出保存框
    let iframe = document.getElementById('downloadIframe');
    if (!iframe) {
      iframe = document.createElement('iframe');
      iframe.id = 'downloadIframe';
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
    }
    //拼接路径,并调用相关下载的接口,返回的数据类型是bytes[]数组
    iframe.src = "http://localhost:8001/cft/user/uploadExcel"
}

后端代码

    @GetMapping("/uploadExcel")
    public ResponseEntity<byte []> testExportTest() throws IOException {

        String  [] excelheader  = {"项目","电话","联系人","金额","负责人","周期"};

        //创建文档对象
        HSSFWorkbook wb = new HSSFWorkbook();
        // 建立新的sheet对象（excel的表单）
        HSSFSheet sheet = wb.createSheet("项目信息统计");
        HSSFRow rowHead = sheet.createRow(0);

        // 创建第一行
        for (int i = 0; i < excelheader.length; i++) {
            rowHead.createCell(i).setCellValue(excelheader[i]);
        }
        HSSFRow row = sheet.createRow(1);
        row.createCell(0).setCellValue("社工协议");
        row.createCell(1).setCellValue("15071384121");
        row.createCell(2).setCellValue("王凯");
        row.createCell(3).setCellValue("500");
        row.createCell(4).setCellValue("周三");
        row.createCell(5).setCellValue("150");

        ByteArrayOutputStream os = new ByteArrayOutputStream();
        wb.write(os);
        os.flush();

        String fileName ="项目信息导出.xls";
        fileName = new String(fileName.getBytes("utf-8"),"ISO_8859_1");

        HttpHeaders httpHeaders = new HttpHeaders();
        httpHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        httpHeaders.setContentDispositionFormData("attachment", fileName);

        //这里需要注意的事返回的数据类型是指定的
        return new  ResponseEntity<byte[]>(os.toByteArray(),httpHeaders,HttpStatus.OK);
    }

类似的,对于图片文件或者文本文件,因为浏览器默认都是直接打开的,我们需要将文件进行字节话,然后按照指定的类型返回,亦可以对文件进行下载功能