엑셀 내 보 내기 - 서버 에서 브 라 우 저 로 의 간단 한 처리

Excel 기능 내 보 내기
서버 에서 브 라 우 저 까지 의 간단 한 처 리 는 참고 하 시기 바 랍 니 다.
서버 에서 내 보 내기 기능 의 핵심 코드 를 정의 합 니 다.
자바 는 export 의 기능 함 수 를 정의 합 니 다. 다음은 핵심 코드 (인터페이스 중의 일부 처리 논리) 입 니 다.

@Override
public byte[] export(String startdate, String enddate, Integer type, String name,
 HttpServletResponse response) {
    // other logic omitted here ...

    // set response args，it used for open download
    response.reset();
    response.setContentType("application/vnd.ms-excel;charset=utf-8");
    try {
        response.setHeader("Content-Disposition", "attachment;filename=" + 
        new String((name+ ".xls").getBytes(), "iso-8859-1"));
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    }
    ByteArrayOutputStream output = new ByteArrayOutputStream();
    try {
        workList.write(output); // write
    } catch (IOException e) {
        e.printStackTrace();
    }
    return output.toByteArray();
}

전단 처리

방식 1: ng1 을 사용 하여 사용자 정의 명령 에서 인 터 페 이 스 를 통 해 데이터 흐름 을 수신 합 니 다. [호 환 문제 가 있 는 방식]

명령 은 다음 과 같다.

angular.module('yourNgApp')
    .directive('sysExport', function ($http, $document) {
        return {
            templateUrl: "app/system/export/export.directive.html",
            restrict: 'EA',
            replace: true,
            scope: {
                item: '='
            },
            link: function (scope, element) {
                //        
                function getExport(postData) {
                    //      url
                    var url = '/api/course/export?startdate=' + 
                    postData.startdate + '&enddate=' + postData.enddate + 
                    '&type=' + postData.type + '&name=' + postData.name;
                    //      responseType      ！
                    var finalPostData = {
                        url: url,
                        method: 'POST',
                        responseType: "arraybuffer",
                        headers: {'Content-type': 'application/json'}
                    };
                    $http(finalPostData)
                        .success(function (data) {
                            var blob, fileName, blobArgs;
                            blobArgs = {type: 'application/vnd.ms-excel application/x-excel'};
                            blob = new Blob([data], blobArgs);
                            var a = $document[0].createElement('a');
                            a.download = postData.name + '.xls';
                            a.href = URL.createObjectURL(blob);
                            a.click();
                        })
                        .error(function (e) {
                            console.log(e);
                        });
                }

                element.on('click', function () {
                    getExport(scope.item);
                });
            }
        };
    });

이로써 지령 의 클릭 이 벤트 를 통 해 excel 형식 을 다운로드 할 수 있 게 되 었 다.

내 보 내기 기능 은 주로 백그라운드 관리 에 사용 되 기 때문에 적용 성 이 보편적 이지 않 기 때문에 호환성 문 제 를 협의 할 수 있 기 때문에 프런트 에 Blob 대상 을 사용 했다.

서버 자원 을 절약 하기 위해 서 는 내 보 낸 파일 을 서버 에 따로 저장 하 는 것 이 아니 라 엑셀 이 있 는 url 주 소 를 되 돌려 다운로드 할 수 있 습 니 다.

2) 방식 2: a 링크 를 통 해 직접 방문, [호환성 이 좋다]
예시:

<a href="/api/course/export?startdate={{cl.startdate}}&enddate={{cl.enddate}}&type={{cl.type}}&name={{cl.name}}" class="btn btn-success">  a>

넓히다

mine 유형:http://www.w3school.com.cn/media/media_mimeref.asp

Blob 의 용법 과 호환성:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

자바 단 은 엑셀 을 내 보 내 는 도구 poi 에 사 용 됩 니 다.http://poi.apache.org/ https://github.com/apache/poi

a. 다운 로드 와 그 호환성 에 대해:http://www.w3school.com.cn/tags/att_a_download.asp

URL. createObjectURL:https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

총결산
위 전단 에 사 용 된 것 은 모두 H5 고급 API 의 적용 성 이 높 지 않 지만 일부 문 제 를 임시로 해결 했다. 시도 로 만 사용 했다.) a 링크 를 통 해 요청 하고 서버 에서 파일 작업 을 직접 완성 했다. 클릭 한 후에 직접 다운로드 하고 호환성 이 좋 지만 큰 파일 의 전송 다운로드 에 적합 하지 않다.