excel导出 下载弹框

---

文件下载,excel导出

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

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

导出代码封装

js 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); // } },

前端代码

```js 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" }

```

后端代码

```java @GetMapping("/uploadExcel") public ResponseEntity

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);
}

```

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