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

投稿日時: 投稿者:

PDFをWebブラウザに簡単に表示する備忘録です。

  1. <embed src=”XXX.pdf”></embed>で表示する方法
  2. <object classid=”CLSID:CA8A9780-280D-11CF-A24D-444553540000″ src=”XXX.PDF”></object>で表示する方法

他にも有るかも知れませんが、とりあえず上の2つが簡単です。

ちなみに、動的にPDFファイルを変更して表示したい場合は、JAVASCRIPTを使う事になり、このタグのテーマにやっと沿えます＾＾；

例は、objectを利用して表示するPDFを動的に表示方法とembedを利用して利用してPDFを動的にする方法を載せています。
適宜簡単な説明が入っているのでなんとなくわかると思います。

ちなみに、objectを利用して表示する方はIEでしか動きません。
embedはIE,chrome共に動きました。

<html>
<head>
  <title>pdftest</title>
  <script type="text/javascript">
    onload = function () {
      var btn1 = document.getElementById("button1");
      btn1.onclick = function () {
        //Divの中身をクリア
        var element = document.getElementById("div_PDF").childNodes[0];
        if(element!=undefined){
          document.getElementById("div_PDF").removeChild(element);
        }

        //OBJECTタグを作成
        var obj = document.createElement('object');
        obj.setAttribute('id', 'objPdf');
        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', 'http://www.pref.gifu.lg.jp/kurashi/zeikin/kenzei/zeimoku/kojin.data/kifukinkoujo.pdf');
        //param.setAttribute('value', 'PDFのURLを記述');
        obj.appendChild(param);

        //作成したOBJECTタグをDIVタグの中にセット
        var div = document.getElementById("div_PDF");
        div.appendChild(obj);
      }

      var btn2 = document.getElementById("button2");
      btn2.onclick = function () {
        //Divの中身をクリア
        var element = document.getElementById("div_PDF").childNodes[0];
        if (element != undefined) {
          document.getElementById("div_PDF").removeChild(element);
        }

        var emb = document.createElement('embed');
        emb.setAttribute('width', '500');
        emb.setAttribute('height', '700');
        emb.src = "https://www.nta.go.jp/shiraberu/ippanjoho/pamph/inshi/pdf/zeigaku_ichiran.pdf";
        //emb.src ="PDFのURLを記述";

        //作成したOBJECTタグをDIVタグの中にセット
        var div = document.getElementById("div_PDF");
        div.appendChild(emb);
      } 
    }
  </script>
</head>
<body>
  <form id="form1">
    <div id="div_PDF" style="width:520px; height:780px; background:#ccc"></div>
    <input type="button" id="button1" onclick="button1_click" value="object PDF表示" />
    <input type="button" id="button2" onclick="button1_click" value="embed PDF表示"/>
  </form>
</body>
</html>