[JAVASCRIPT]　PDFをWebブラウザに簡単に表示する方法２

投稿日時: 投稿者:

PDFをWebブラウザに簡単に表示する備忘録です。
先回は単体で表示させていましたが、今度は切り替えて表示が出来るようにしました。

テキストファイルでPDFのURLリストを事前に作成しておきます。
そのテキストファイルを読込み、selectに格納します。
selectでPDFを選択することでPDFを表示します。
タイマー機能を付けてPDFを表示すれば、工夫次第でスライドをめくるように進めることもできます。

ちなみに、jqueryを使いましたので先回と少し文法等が異なります。

それからobjectを利用したのでIEでしか動きません。embedに切り替えればChromeでも動きますので適宜切り替えて使ってください。

<html>
<head>
  <title>test</title>
  <script src="./jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      var i=0;

      $("#Select1").change(function () {
        pdfChange();
      });

      $("#files").change(function () {
        if (window.File) {
          // File APIが実装のブラウザ
          var fileList = document.getElementById("files").files;
          var reader = new FileReader();
          reader.onload = function () {
            // ファイル読み込み完了時
            var term = reader.result.split('\n');
            $.each(term, function (index, elem) {
              $("#Select1").append($('<option>').html(elem).val(elem));
            });

            //初回のPDF更新
            pdfChange();
          }
          // ファイルの読込み
          reader.readAsText(fileList[0], "utf-8");
        }
        else {
          // File APIが未実装のブラウザ
          $("#list").html("File APIが未実装のブラウザ");
        }
      });

      //PDF表示切替
      function pdfChange() {
        if (i > 0) {
          $("#div_PDF").empty();
        }
        i += 1;

        //OBJECTタグを作成
        var tid = 'objPdf' + jQuery.now().toString();
        var obj = document.createElement('object');
        obj.setAttribute('id', tid);
        obj.setAttribute('classid', 'clsid:CA8A9780-280D-11CF-A24D-444553540000'); // PDFのクラスID（固定値）
        obj.setAttribute('style', 'width:500px; height:700px;');

        //PDFのソースを設定
        var param = document.createElement('param');
        param.setAttribute('name', 'src');
        param.setAttribute('value', $("#Select1").val());
        obj.appendChild(param);

        //作成したOBJECTタグをDIVタグの中にセット
        $("<div id='pdfDiv" + i + "'></div>").appendTo($("#div_PDF"));
        var div = document.getElementById('pdfDiv' + i);
        div.appendChild(obj);
      }

    });

  </script>
</head>
<body>
  <form id="form1">
    <div>
      <input type="file" id="files" name="files[]" multiple /><br />
      ▼読込んだファイル（テキストファイル）を表示する<br />
      <select id="Select1">
      </select>
    </div>
    <div id="div_PDF" style="width:500px; height:700px; background:#ccc"></div>
  </form>
</body>
</html>