kintone에 첨부된 PDF 파일이 IE11에서 미리보기 표시할 수 없었기 때문에 그 메모

IE11에서 미리 볼 수없는 이유

IE에서는 Data URI 형식으로 이미지 이외는 지정할 수 없다
htps : // msd 응. 미 c 로소 ft. 코 m / 자 jp / ぃ b 등 ry / c848897 (v = vs. 85). 아 spx

그래서 PDF.js 를 사용하여 미리보기 표시
PDF.js는 PDF를 HTML5 형식으로 변환하여 표시하므로 표시되기까지 조금 시간이 걸리는 인상

킨톤 설정

양식 설정 필드 및 필드 코드

첨부 파일/file

공간/공간

※ 첨부 파일 필드에 저장된 PDF 파일 하나를 스페이스 필드에 미리보기 표시

Chrome 등의 경우

object 태그에 blob이나 Data URI를 지정하는 것으로 표시할 수 있으므로 매우 간단
↓ 샘플은 blob

화면 샘플

샘플 코드

(function() {
    'use strict';

    function getFile(url) {
        var df = new $.Deferred();
        var xhr = new XMLHttpRequest();

        xhr.open('GET', url, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.responseType = 'blob';

        xhr.onload = function(e) {
            if (this.status === 200) {
                df.resolve(this.response);
            }
        };

        xhr.send();
        return df.promise();
    }

    kintone.events.on('app.record.detail.show', function(event) {
        var record = event.record;

        var space = kintone.app.record.getSpaceElement('space');
        var fileKey = record.file.value[0].fileKey;
        var fileUrl = '/k/v1/file.json?fileKey=' + fileKey;

        var promise = getFile(fileUrl);
        promise.done(function(pdfData) {
            var url = window.URL || window.webkitURL;
            var imageUrl = url.createObjectURL(pdfData);
            var preview = '<object data="' + imageUrl + '" type="application/pdf" width="100%" height="100%">';
            preview += '</object>';
            $(space).append(preview).css('height', '500');
        });
    });
})();

JS/CSS 설정

jQuery (2.1.4에서 확인)

IE11의 경우

우선 이번 샘플에서는 1페이지째만을 표시
열심히 하면 PDF내의 문자를 선택(복사)할 수도 있는 모양

화면 샘플

샘플 코드

(function() {
    'use strict';

    function getFile(url) {
        var df = new $.Deferred();
        var xhr = new XMLHttpRequest();

        xhr.open('GET', url, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.responseType = 'arraybuffer';

        xhr.onload = function(e) {

            if (this.status === 200) {
                df.resolve(new Uint8Array(this.response));
            }
        };

        xhr.send();
        return df.promise();
    }


    kintone.events.on('app.record.detail.show', function(event) {
        var record = event.record;

        var space = kintone.app.record.getSpaceElement('space');
        var fileKey = record.file.value[0].fileKey;
        var fileUrl = '/k/v1/file.json?fileKey=' + fileKey;

        var promise = getFile(fileUrl);

        promise.done(function(pdfData) {
            // pdf.worker.jsファイルへのパスを指定
            PDFJS.workerSrc = '//www.dropbox.com/s/xxxxxx/pdf.worker.js?dl=1';
            PDFJS.getDocument(pdfData).then(function(pdf) {
                return pdf.getPage(1);
            }).then(function(page) {
                var scale = 1.0;
                var viewport = page.getViewport(scale);

                var canvas = $('<canvas />');
                var context = $(canvas)[0].getContext('2d');
                $(canvas)[0].width = viewport.width;
                $(canvas)[0].height = viewport.height;
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);

                $(space).append(canvas);
            });
        });

    });
})();

JS/CSS 설정

jQuery (2.1.4에서 확인)

pdf.js

pdf.worker.js

compatibility.js

공간/공간

※ PDF.js의 빌드는 여기
※pdf.worker.js는 파일 사이즈가 크고 kintone에 등록할 수 없기 때문에 Dropbox 등을 사용합시다

kintone 개발자 라이센스

kintone은 5 사용자, 1 년 무료 개발자 라이센스를 제공하므로 관심이 있다면 클릭! 클릭!