Help us understand the problem. What is going on with this article?

Data URI形式のPDFをIE11でプレビュー

More than 3 years have passed since last update.

kintoneに添付されたPDFファイルがIE11でプレビュー表示できなかったのでそのメモ

IE11でプレビューできない理由

IEではData URI形式に画像以外は指定できない
https://msdn.microsoft.com/ja-jp/library/cc848897(v=vs.85).aspx

のでPDF.jsを使ってプレビュー表示する
PDF.jsはPDFをHTML5形式に変換して表示するので表示されるまでにちょっと時間がかかる印象

kintoneの設定

フォーム設定のフィールドとフィールドコード

  • 添付ファイル/file
  • スペース/space

※添付ファイルフィールドに保存されたPDFファイル1つをスペースフィールドにプレビュー表示する

Chromeなどの場合

objectタグにblobやData URIを指定することで表示できるのでとっても簡単
↓のサンプルはblobで

画面サンプル

pdf_preview_chrome.png

サンプルコード

(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内の文字を選択(コピー)することもできる模様

画面サンプル

pdf_preview_ie.png

サンプルコード

(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
  • スペース/space

※PDF.jsのビルドはここ
※pdf.worker.jsはファイルサイズが大きくてkintoneに登録できないのでDropboxなどを使いましょう

kintone開発者ライセンス

kintoneには5ユーザー、1年間無償の開発者ライセンスが用意されているので、興味がある方はクリック!クリック!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away