vue 의 백 엔 드 에서 엑셀 내 보 내기 기능 을 하여 데이터 흐름 전단 의 처리 작업 을 되 돌려 줍 니 다.

프로젝트 에 내 보 내기 기능 의 실현 이 있 으 니 블 로그 로 기록 하 세 요.표 내 보 내기 데이터 형식 과 스타일 에 대한 요구 가 있 기 때문에 이 내 보 내기 기능 은 백 엔 드 에 놓 고 하고 백 엔 드 는 데이터 흐름 을 되 돌려 주기 때문에 원 하 는 표 로 처리 하고 내 보 내야 합 니 다.
먼저 효과 그림 보기:
페이지 효과:

Excel 호출 내 보 내기 인 터 페 이 스 를 내 보 내 려 면 누 르 십시오:

배경 에서 돌아 오 는 데이터 흐름,알 아 볼 수 없 는 어 지 러 운 코드:

다음은 이 어 지 러 운 코드 를 처리 해 야 합 니 다.사용 하 는 곳 이 많 기 때문에 util.js 파일 에 공공 방법 을 밀봉 하여 던 졌 습 니 다.
vue 에 서 는 인 터 페 이 스 를 밀봉 하 는 방법 이 있 지만,여 기 는 axios 를 단독으로 사용 해 야 하기 때문에 먼저 util.js 에 axios 를 도입 합 니 다.
import axios from 'axios'

//   Excel    
export function exportMethod(data) {
  axios({
    method: data.method,
    url: `${data.url}${data.params ? '?' + data.params : ''}`,
    responseType: 'blob'
  }).then((res) => {
    const link = document.createElement('a')
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
 
    // link.download = res.headers['content-disposition'] //      
    link.download = data.fileName //      
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }).catch(error => {
    this.$Notice.error({
      title: '  ',
      desc: '      '
    })
    console.log(error)
  })
}

사용 하 는 페이지 에 도입 방법:
import { exportMethod } from '@/libs/util'
methods 내 보 내기 방법 에서 공용 내 보 내기 방법 을 호출 합 니 다.
메모:우리 백 엔 드 는 get 방법 을 사용 하기 때문에 get 요청 을 전달 하고 전달 할 인 자 를 연결 합 니 다.post 요청 이 라면 전달 하 는 get 을 post 로 바 꾸 고 전달 데 이 터 를 data 데이터 대상 으로 바 꿉 니 다.params 는 제거 합 니 다.공공 방법 에서 url 에 연 결 된 인 자 를 제거 하고 url 경 로 를 직접 받 으 면 됩 니 다.data 를 하나 더 받 으 면 됩 니 다.

//           
    exportDepReceRank() {
      let myObj = {
        method: 'get',
        url: exportDepartmentRankUrl,
        fileName: 'XX  ―          ',
        params: `startDate=${changeDate(this.dateValue[0])}&endDate=${changeDate(this.dateValue[1])}`
      }
      exportMethod(myObj)
    },

마지막 으로 Excel 효과 도 내 보 내기:

추가 지식:Vue 프로젝트 는 axios 요청 인 터 페 이 스 를 이용 하여 엑셀 을 다운로드 합 니 다(앞 백 엔 드 코드 첨부)
제 가 알 기 로 는 전단 의 다운로드 방식 은 세 가지 가 있 습 니 다.첫 번 째 는 a 탭 을 통 해 다운로드 하 는 것 입 니 다.두 번 째 는 window.location 을 통 해 다운로드 하 는 것 입 니 다.세 번 째 는 백 엔 드 를 요청 하 는 인 터 페 이 스 를 통 해 다운로드 하 는 것 입 니 다.오늘 은 이 세 가지 다운로드 방식 을 기록 하 겠 습 니 다.
방법 1:a 탭 을 통 해
//href 는 파일 의 저장 경로 나 주소 입 니 다.download 는 파일 이름 을 묻 습 니 다.
장점:간단 하고 편리 하 다.단점:이 다운로드 방식 은 Firefox 와 Chrome 만 지원 하고 IE 와 Safari 는 지원 되 지 않 으 며 호환성 이 좋 지 않 습 니 다.방법 2:window.location 을 통 해window.location = 'http://127.0.0.1:8080/api/download?name=xxx&type=xxx'장점:간단 하고 편리 하 다.단점:get 요청 만 할 수 있 습 니 다.token 검사 가 있 을 때 불편 합 니 다.방법 3:요청 백 엔 드 인 터 페 이 스 를 통 해 // download.js import axios from 'axios' export function download(type, name) { axios({ method: 'post', url: 'http://127.0.0.1:8080/api/download', //헤더 에 token 설정 headers: { loginCode: 'xxx', authorization: 'xxx' }, data: { name: name, type: type }, //바 이 너 리 스 트림 파일 은 반드시 blob 로 설정 해 야 합 니 다.기본 값 은 json 입 니 다. responseType: 'blob' }).then(res => { const link = document.createElement('a') const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) link.style.display = 'none' link.href = URL.createObjectURL(blob) link.setAttribute('download', `${name}.xlsx`) document.body.appendChild(link) link.click() document.body.removeChild(link) }) } // download.java @RequestMapping(value = "/api/download",produces = "application/octet-stream", method = RequestMethod.POST) public void downloadTemplate(@RequestBody Map<String,Object> paramsMap, HttpServletResponse response) { try { if (paramsMap.get("type").equals("xxx") && paramsMap.get("name").equals("xxx")) { String[]str=new String[]{"구현","소속 성","소속 도시"}; Workbook workbook=ExportExcel.exportExcel("행정구 역 표 모델",str,null,"yyy-MM-dd"); download(response, workbook, "CityDict"); } } catch (Exception e) { e.printStackTrace(); } } private void download(HttpServletResponse response, Workbook workbook, String fileName) { try { response.setContentType("application/octet-stream;charset=UTF-8;"); response.addHeader("Content-Disposition", "attachment;fileName=" + fileName + ".xlsx"); ByteArrayOutputStream by = new ByteArrayOutputStream(); OutputStream osOut = response.getOutputStream(); //지정 한 바이트 를 이 출력 흐름 에 기록 합 니 다. workbook.write(osOut); //이 출력 흐름 을 새로 고치 고 모든 버퍼 의 출력 바이트 를 강제로 기록 합 니 다. osOut.flush(); //흐름 닫 기 osOut.close(); } catch (IOException e) { LogUtils.getExceptionLogger().info("템 플 릿 다운로드 오류:{}",e.getMessage())); } } 장점:headers 에 token 을 설정 할 수 있 습 니 다.파일 은 자바 코드 에서 생 성 되 었 고 생 성 된 파일 이 유연 합 니 다.단점:실현 이 복잡 하 다.이상 의 vue 에서 백 엔 드 에서 엑셀 내 보 내기 기능 을 하여 데이터 스 트림 전단 으로 돌아 가 는 처리 작업 은 바로 작은 편집 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.