jhhan의 블로그

Spring - Excel Download(2) 본문

Spring & Vue.js

Spring - Excel Download(2)

jhhan000 2021. 1. 19. 23:03

이번 포스트는 저번 엑셀 다운로드에서 발생할 수 있던 에러를 수정해보려고 합니다.

 

저번에 마지막에서 

void로 리턴값을 해놨지만, Vue.js에서는 잘 받아서 진행한다고 했습니다.

이번에는 정석적으로 리턴을 해보겠습니다.

 

리턴할 때 ResponseEntity<>를 사용하고, InputStreamResource를 바디에 담아 반환하도록 설계했습니다.

아 그리고 이번에는 갑자기 Kotlin으로 진행을 했습니다...

그래도 코틀린과 자바는 굉장히 비슷하므로, 자바를 잘 아신다면 코틀린 문법을 이해하는데 큰 어려움이 없을 것 같습니다.

 

front코드는 변경할 것이 없습니다. 그대로 갑니다.

 

back코드를 살펴보겠습니다.

    @PostMapping("/excel")
    fun getExcelFile(@RequestBody iads: List<IntAndDouble>): ResponseEntity<InputStreamResource> {
        for (iad in iads) {
            println(iad)
        }
        println("Excel Start!")
        val file = File.createTempFile("testExcel_", ".xlsx")
        val wb = XSSFWorkbook()
        val sheet = wb.createSheet("sheet1")
        var row: Row?
//        var cell: Cell?
        var rowNum = 0

        // Header
        row = sheet.createRow(rowNum++)
        row.createCell(0).setCellValue("Mode")
        row.createCell(1).setCellValue("Affinity")
        row.createCell(2).setCellValue("lb")
        row.createCell(3).setCellValue("ub")
        row.createCell(4).setCellValue("url1")
        row.createCell(5).setCellValue("url2")

        // Body
        for(iad in iads) {
            row = sheet.createRow(rowNum++)
            row.createCell(0).setCellValue(iad.mode.toDouble())
            row.createCell(1).setCellValue(iad.affinity)
            row.createCell(2).setCellValue(iad.lb)
            row.createCell(3).setCellValue(iad.ub)
            row.createCell(4).setCellValue(iad.pUrl)
            row.createCell(5).setCellValue(iad.qUrl)
        }

        wb.write(file.outputStream())
        wb.close()

        val excelHeader = HttpHeaders().apply {
            contentType = MediaType.parseMediaType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
            contentDisposition = ContentDisposition.builder("attatchment").filename("example.xlsx").build()
        }

        return ResponseEntity.ok()
            .headers(excelHeader)
            .body(InputStreamResource(FileInputStream(file)))
    }

back 코드입니다. 코드는 임시 엑셀파일을 생성한 후 그 내용을 전달해주는 방식을 채택했습니다.

설명을 하겠습니다.

  • val file ~~~ : 임시 엑셀파일을 생성합니다. 이름은 마음대로 정하셔도 됩니다.
  • Header와 Body 부분을 설정합니다.
  • wb.write(file.outputStream()) : outputStream을 통해 임시 엑셀 파일을 생성합니다.
  • wb.close() : 스트림을 종료합니다. 안하면 임시 파일에 오류가 생길 수 있습니다.
  • excelHeader : 헤더를 정의합니다.
  • contentType : 저번하고 바뀌었을 수도 있을 거 같은데요..
                      저렇게 설정해야 .xlsx 확장자를 선택할 수 있다고 합니다.
  • contentDisposition : 저번하고 동일합니다. 단지 문법만 바뀌었을 뿐입니다.
  • return문
    : header에는 미리 선언한 excelHeader를 넣습니다.
      body에는 InputStreamResource 형태로 반환하기 위해 변형을 했습니다.

 

이제 backend(kotlin)과 frontend(Vue.js)를 모두 실행합니다.

그리고 엑셀 버튼을 눌러봅니다.

그러면 저번과 동일하게 엑셀파일이 다운되는 것을 알 수 있습니다.

물론 엑셀 파일의 내용 역시 저번 포스트에 적었던 것과 동일합니다.

 

 

 

이렇게 엑셀 다운로드가 끝난 것 같습니다.

InputStream, OutputStream에 대해서도 잘 몰라서 아직도 좀 아리송하긴 합니다.

코딩의 길은 끝이 없네요.

 

끝~

'Spring & Vue.js' 카테고리의 다른 글

Spring - Excel Download(3)  (1) 2021.01.30
Spring - Excel Download  (0) 2021.01.12
Spring + Vue.js(3)  (1) 2020.08.02
Spring & Vue.js  (0) 2020.06.11
Spring & Vue.js 연동  (5) 2020.05.13