【jQuery】jQueryのデバッグツール

jQueryのデバッグツール

jQueryプログラムを書いてもデバッグ出来る環境がないとプログラムが思った通りの動作をしないときに、どこが良くないのか見つけるのに苦労します。

jQueryのデバッグが手軽に出来るツール

手軽にデバッグを行うことが出来る環境は、すでにブラウザに組み込まれています。

IEやChromeはhtmlファイルを読み込んだ後、F12キーを押すことでデバッグ環境が表示されます。

慣れるまでに試行錯誤するかも知れませんが、動かしているうちにコツがわかってくると思います。

変数に何が設定されていて、どう分岐されているか確認しながら画面を見ることができます。

マイクロソフトの統合開発ツール

私はHTML文書を作成したり、jQueryプログラムを書いたり、デバッグするのに、マイクロソフトの統合開発ツールVisual studioを使用しています。
現在は無料のVisual Studio Communityが簡単に?利用できますのでVisual Studio Communityを使うのも良いですね。
一応リンク先を付けておきます。
visual studio 2015 community

【jQuery】jQueryを利用するためには?

jQueryを利用するためには?

jQueryは、ご存知の通りHTML文書に組み込んで利用します。
利用すると言う事だけであればHTML文書から、jQueryファイルを取得し外部参照ソースとして呼ぶか、ネットワークで配信してもらえるサービスを利用して呼ぶか、のどちらかを行うだけでjQueryを使うことができるようになります。

jQueryファイルを取得するには

jQueryはたった一つのファイルを取得するだけです。

1.jQuery本家サイトのダウンロードページから、最新版ライブラリをダウンロードすることができます。
現在はVer3系になっています。

2.CDN(Content Delivery Network)と言われるネットワークで配信してもらえるサービスもあります。
Google CDN、Microsoft CDN、CDNJS CDN、jsDelivr CDNが紹介されています。
とりあえず、Google CDN、Microsoft CDNをリンクしておきますが、リンク切れするかもです。
Google CDN
Microsoft CDN

ダウンロードしても良いですし、ネットワーク経由で参照しても良いので自分の環境に合わせてください。
また、jQueryは良く更新が行われている「生きて進化しているライブラリ」です。
jQueryを取り巻く環境に合わせ進化していますので、仕様が更新されるチェックを行うことも大切です。

jQueryを利用してプログラミングする

すでにプログラミングの素養の有る方は、すぐにでも概要を掴み複雑なプログラムを作り始めることができるかも知れませんが、普通はそんなに簡単にできません。
まずは小さく単純な動作を確認できる環境を整え、いくつかのシンプルなプログラムを書き、動きを確かめながらjQueryに慣れていくことが肝要です。
これから引き続きプログラミング情報を載せていく予定ですが、簡単に手順を書きます。
1.HTML文書を作成する
2.<head>要素内でjQueryファイルを呼び出す
例)<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
3.jQueryを使って処理プログラムを書く
4.動かして動作確認する

HTML文書を作成したり、jQueryプログラムを書いたり、デバッグするのに、私はVisual studioを使用しています。
現在は無料のVisual Studio Communityが簡単に?利用できますのでVisual Studio Communityを使うのも良いですね。
一応リンク先を付けておきます。
visual studio 2015 community

【css,jquery】htmlテーブルのヘッダーを固定する方法案

テーブルヘッダーを縦スクロール及び横スクロールともに固定する方法のシステム開発備忘録です。
一つ前のシステム備忘録でCSSのみでテーブルヘッダーを縦スクロールする方法を投稿しましたが、今回は横スクロールにも対応するシステム開発備忘録です。

テーブルのヘッダーを固定する要望は多いと思いますが、横スクロールをするためにはcssだけでは辛いですので、jqueryを使って、面倒なプログラミングをなるべく簡単にする案です。

テーブルヘッダーを固定する案はいろいろ考案できるので、その中の一案として考えています。
今回は、事前に用意するのは、大枠となるdivタグと子要素として固定部table、水平ヘッダー部div,table、垂直ヘッダー部div,table、データ部div,tableです。
htmlを貼っておくので詳細はそこで確認してください。

イメージとしては、下の表の配置です。
データ部のdivのスクロールバーの移動量を水平ヘッダー部div、垂直ヘッダー部divに反映させ、ヘッダーを固定するイメージです。

固定部 水平ヘッダー部
垂直ヘッダー部 データ部

また、テーブルは通常のテーブルをデータ部に作成します。
id=”tableD”としています。
jqueryでは、この普通に作られたテーブルのヘッダー部を水平ヘッダー部にコピーします。
また、テーブルの一番左端の列を垂直ヘッダー部にコピーします。
コピーされたヘッダーと一番左端の列は非表示にしています。

あとはスクロールイベントを捉えて、移動量を反映させる単純な仕組みです。

尚、厄介なのはテーブルの幅が自動で調整されていると微妙に誤差ができ、ずれが生じます。
きっちり計算すればずれは発生しないのかもしれませんが、ブラウザーの種類やバージョンの違いでも誤差が発生する可能性が有るので、この辺りは使用する環境で使用できない案になる可能性も有ります。

まぁ、実際のプログラムに使用する場合はもう少し考慮が必要な部分も有りますので、あくまでも参考までに。

htmlは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
  /* 基本のテーブル定義 */
  #tableT,
  #tableH,
  #tableV,
  #tableD {
    border: 1px solid #000000;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
  }

  #tableD td {
    border: 1px solid #000000;
    height: 16px;
  }

  #tableH th,
  #tableD th {
    border: 1px solid #000000;
    font-size: 16px;
  }

  #tableD th {
    background-color: #FFBB88;
    color: #000000;
  }

  #tableD tr:nth-child(odd) td {
    background-color: #C8C8E8;
    color: #000000;
  }

  #tableD tr:nth-child(even) td {
    background-color: #E8E8FF;
    color: #000000;
  }

  #header_h {
    position: absolute;
    top: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #header_v {
    position: absolute;
    left: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #data {
    position: absolute;
    overflow-x: scroll;
    overflow-y: scroll;
    width: 270px;
    height: 150px;
  }
  
</style>
  <script type="text/javascript">

    $(document).ready(function () {

      //固定部を作成、tableDの一番左のヘッダーを取得、固定部に張り付ける
      //水平ヘッダー部を作成
      var fF=0;
      $("#tableD > thead > tr > th").each(function (i) {
        if (fF == 0) {
          $(this).clone(true).appendTo($("#tableT > thead > tr"));
          StyleCopyB($("#tableT > thead > tr > th:first"), $(this));
          fF = 1;
        } else {
          $(this).clone(true).appendTo($("#tableH > thead > tr"));
          StyleCopyB($("#tableH > thead > tr > th:last"), $(this));
        }
      });
      //非表示化
      $("#tableD > thead > tr").hide();

      //垂直ヘッダー部を作成
      $("#tableD > tbody > tr").each(function (i) {
        $("#tableV > tbody").append("<tr></tr>");
        $(this).children().eq(0).clone(true).appendTo($("#tableV > tbody > tr:last-child"));
        $(this).children().eq(0).hide();
        StyleCopyB($("#tableV > tbody > tr:last-child > td"), $(this).children().eq(0));
      });

      //垂直ヘッダーのwidthを固定部に設定
      StyleCopyA($("#tableT > thead > tr > th:first"),$("#tableV > tbody > tr:first > td"));

      //データ部のwidthを水平ヘッダーに設定
      $("#tableH > thead > tr > th").each(function (i) {
        $(this).width($("#tableD > tbody > tr").children().eq(i+1).width());
      });


      //DIVheader-hとDIVdataのleftを設定
      $("#header_h").css("left", $("#tableT").width() + "px");
      $("#data").css("left", $("#tableT").width() + "px");

      //DIVheader-vとDIVdataのtopを設定
      $("#header_v").css("top", $("#tableT").height() + "px");
      $("#data").css("top", $("#tableT").height() + "px");

      //
      $("#header_h").width($("#data").width()-17);//17前後要微調整、垂直スクロールバーの幅....※求め方は不明
      $("#tableH").width($("#tableD").width() - $("#tableT").width());
      $("#tableD").width($("#tableD").width() - $("#tableT").width());

      //DIVheader-vのheightをDIVdataのheightを設定
      $("#header_v").height($("#data").height() - 17);//17前後要微調整は水平スクロールバーの高さ....※17の求め方は不明

      //-------------------------------------------------------------------------------------------------

      $("#data").on(
        'scroll', function () {
          $("#header_h").scrollLeft($("#data").scrollLeft());// データ部のスクロールをヘッダに反映
          $("#header_v").scrollTop($("#data").scrollTop());// データ部のスクロールをヘッダに反映
      });


      //-------------------------------------------------------------------------------------------------

      function StyleCopyA($copyTo, $copyFrom) {
        $copyTo.css("width",
                    $copyFrom.css("width"));
        
      }
      function StyleCopyB($copyTo, $copyFrom) {
        $copyTo.css("height",
                    $copyFrom.css("height"));

        $copyTo.css("font-size",
                        $copyFrom.css("font-size"));

        $copyTo.css("background-color",
                        $copyFrom.css("background-color"));
        $copyTo.css("vertical-align",
                                $copyFrom.css("vertical-align"));

        $copyTo.css("border-top-width",
                    $copyFrom.css("border-top-width"));
        $copyTo.css("border-top-color",
                    $copyFrom.css("border-top-color"));
        $copyTo.css("border-top-style",
                    $copyFrom.css("border-top-style"));

        $copyTo.css("border-left-width",
                    $copyFrom.css("border-left-width"));
        $copyTo.css("border-left-color",
                    $copyFrom.css("border-left-color"));
        $copyTo.css("border-left-style",
                    $copyFrom.css("border-left-style"));

        $copyTo.css("border-right-width",
                    $copyFrom.css("border-right-width"));
        $copyTo.css("border-right-color",
                    $copyFrom.css("border-right-color"));
        $copyTo.css("border-right-style",
                    $copyFrom.css("border-right-style"));

        $copyTo.css("border-bottom-width",
                    $copyFrom.css("border-bottom-width"));
        $copyTo.css("border-bottom-color",
                    $copyFrom.css("border-bottom-color"));
        $copyTo.css("border-bottom-style",
                    $copyFrom.css("border-bottom-style"));
      }
    });
  </script>
</head>
<body>
  <div style="position: relative;">
    <!--固定部-->
    <table id="tableT" style="position:absolute;left:0px;top:0px;">
      <thead>
        <tr></tr>
      </thead>
    </table>

    <!--水平ヘッダー部-->
    <div id="header_h">
      <table id="tableH">
        <thead>
          <tr></tr>
        </thead>
      </table>
    </div>

    <!--垂直ヘッダー部-->
    <div id="header_v">
      <table id="tableV">
        <tbody></tbody>
      </table>
    </div>
    <!--データ部-->
    <div id="data">
      <table id="tableD" style="width:430px;">
        <thead>
          <tr>
            <th>固定項目</th>
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
          </tr>
        </thead>
        <tbody>
          <tr><td style="width:120px;">項目名称A</td><td style="width:130px;">スライド項目A1</td> <td style="width:60px;">項目A2</td> <td style="width:120px;">スライド項目A3</td></tr>
          <tr><td>項目名称B</td><td>スライド項目B1</td><td>項目B2</td><td>スライド項目B3</td></tr>
          <tr><td>項目名称C</td><td>スライド項目C1</td><td>項目C2</td><td>スライド項目C3</td></tr>
          <tr><td>項目名称D</td><td>スライド項目D1</td><td>項目D2</td><td>スライド項目D3</td></tr>
          <tr><td>項目名称E</td><td>スライド項目E1</td><td>項目E2</td><td>スライド項目E3</td></tr>
          <tr><td>項目名称F</td><td>スライド項目F1</td><td>項目F2</td><td>スライド項目F3</td></tr>
          <tr><td>項目名称G</td><td>スライド項目G1</td><td>項目G2</td><td>スライド項目G3</td></tr>
          <tr><td>項目名称H</td><td>スライド項目H1</td><td>項目H2</td><td>スライド項目H3</td></tr>
          <tr><td>項目名称I</td><td>スライド項目I1</td><td>項目I2</td><td>スライド項目I3</td></tr>
          <tr><td>項目名称J</td><td>スライド項目J1</td><td>項目J2</td><td>スライド項目J3</td></tr>
          <tr><td>項目名称K</td><td>スライド項目K1</td><td>項目K2</td><td>スライド項目K3</td></tr>
          <tr><td>項目名称L</td><td>スライド項目L1</td><td>項目L2</td><td>スライド項目L3</td></tr>
          <tr><td>項目名称M</td><td>スライド項目M1</td><td>項目M2</td><td>スライド項目M3</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

以上、テーブルヘッダーを縦スクロール及び横スクロールともに固定する方法のシステム開発備忘録でした。

jquery selectタグの選択されているテキストを取得する

jqueryネタの開発備忘録です。

jqueryを使用してselectタグで選択されているテキストの値を取得する方法が
すぐに分からなかったので調べた結果をメモしておきます。

結論から言うと、
:selected
を使います。

使い方は、

<select id='selectTest'>
  <option value='A'>表示A</ option>
  <option value='B'>表示B</ option>
  <option value='C'>表示C</ option>
  <option value='D'>表示D</ option>
  <option value='E'>表示E</ option>
</ select>

と、なっている場合

alert($('#selectTest').children(':selected').text());

とすることで、表示Aとか表示Bというテキスト値を取得できます。
とりあえず、アラートで表示していますが、適当に代入してください。

ちなみに、普通にvalueの値が欲しい時は、

alert($('#selectTest').val());

ですからね。

あと、selectで複数選択可能のテキスト値の取得の仕方ですが、eachを使用して回して取得します。
具体的には、

$('#selectTest').children(':selected').each(function(){
  alert($(this).text());
});

です。

以上、簡単に説明しました。。。

【ASP.NET】javascriptから見たidについて

今回は、ASP.NETネタです。
クライアントサイドでJavaScriptを使用して操作を行う場合、ASP.NETで設定されるidで迷う場合があります。

場合があると言うのは、シンプルなaspxページの場合は、タグに付けたidがそのまま使用されます。
なので、JavaScriptで記述するさいもidをそのまま記述できます。

ところが、複雑というかマスターページを使用s田場合や、GridViewとかMultiViewのように配下にコントロールを持つようなコントロールを使用した場合には、そのままタグに付けたidを記述するとができません。
と言うのは、親のコントロールidをプレフィックスした形式でidが書き換えられています。
具体的には、マスターページを使用した場合はマスターページにContentPlaceHolderが使用されています。デフォルトの IDは「ContentPlaceHolder1」となっていますので、その中にdivタグを追加して、idを「div1」とした場合は、javascriptに記述するidは「ContentPlaceHolder1_Div1」となります。

これはasp.netが独自に創生したコントロールと人が作成したコントロールのidが重複しないようにするためにされていることなので、
単純に配下に作られたコントロールのidに親のidを頭に付加して重複を避けようと工夫された産物です。

以前はそうなんだと納得し、記述する際に面倒だなぁ。。。デバッグでイベントが発生しないと、あぁあれか。。。となっていました。
しかし、ASP.NET 4 からはどうやら更に工夫がされたようです。
それは、ClientIDModeと呼ばれるプロパティが追加されていました。

ClientIDModeは、idを生成するルールを選択するプロパティが設定できます。

設定値 ルール
AutoID 今まで通り。自動でidが生成される
Static 手で設定したidがそのまま使用される。重複しないように開発者が注意
Predictable ClientIDRowSuffixプロパティ値を参照して生成される

使うとしたら、Staticでしょうか。
Predictableは余計に面倒になるだけのような。大規模開発の場合は予めわかっていた方が便利なのかな?それでもid命名規約を作ればいいことだし。。。

いろいろ有りますが、idの重複をしないようにするための工夫なので、その点を意識して開発すれば問題無いと思います。

以上、ASP.NETネタでした。

jqueryでdocument.getElementById()と同じエレメントを取得するには

jqueryでdocument.getElementById()と同じエレメントを取得するには

久々にjqueryを触ってます。
canvasの処理をする時に

いつもは下のようなコーディングをしてるのですが、

var cEle = document.getElementById('canvas1');
var cCtx = cEle.getContext('2d');

それを

var cEle = $("#canvas1");
var cCtx = cEle.getContext('2d');

と記述して、2行目で落ちてました。
これだと、canvus1のjqueryのObjectを取得しているために、getContextできなくて落ちちゃうんでしょうね。
それで、Elementを取得するようにするために、.get()か[]でElementの配列へアクセスします。

var cEle = $("#canvas1").get(0);
var cCtx = cEle.getContext('2d');

とするか、

var cEle = $("#canvas1")[0];
var cCtx = cEle.getContext('2d');

とするか、

var cEle = $("#canvas1");
var cCtx = cEle[0].getContext('2d');

これでエレメントが取得できます。

以上、jqueryでエレメントを取得するでした。

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

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>

[JAVASCRIPT] PDFをWebブラウザから自動で印刷する方法

PDFをWebブラウザに簡単に印刷する備忘録です。
仕事では、1)クライアント側で印刷したい旨の情報をサーバ側に伝える。2)サーバ側で動的にPDFを作成して、そのPDFをWebサーバに配置(決まった場所に保存)して、保存したURLをクライアント側(Webブラウザ)に伝え、3)Webブラウザで(自動で)印刷する。というパターンが多いと思います。

今回は、一連の手順を示したいと思います。
1)これは、Jquey.ajaxを使えば簡単にサーバとの連携ができます。
具体的には、

//PDF作成依頼
var fileURLdata ;
fileURLdata = JSON.parse($.ajax({
url: "サーバ側処理URL.aspx?targetid=" + targetid --今回はASP.NETで処理しています
+ "&amp;year=" + year --引数は処理に合わせて適当に
+ "&amp;month=" + month
+ "&amp;kbn=" + kbn
+ "&amp;sub_cd=" + sub_cd
, async: false --ファイルの作成を待つため同期処理で
}).responseText);

2)サーバ側でPDF作成
細々とした部分は割愛して書きます。

try
Dim fileURL As String = "0"

'パラメータ取得
'year, month, targetid, 等々の取得

'定義ファイル指定
ReportViewer1.LocalReport.ReportPath = "xxxxx.aspx.rdlc"

'パラメータセット
param.Add(New ReportParameter("Report_Parameter_0", "パラメータ文言"))
ReportViewer1.LocalReport.SetParameters(param)

'データバインド
Dim oQA As New TableAdapters.xxxxxTableAdapter
Dim oDT As New xxxxx.xxxxxDataTable
oDT = oQA.GetData(year, month, targetid, kbn) 'クライアント側からパラメータで貰ったもの

Dim oRDS As New ReportDataSource
oRDS.Name = "DataSet1_xxxxx"
oRDS.Value = oDT
ReportViewer1.LocalReport.DataSources.Add(oRDS)

'データ再セット
ReportViewer1.LocalReport.Refresh()

Dim warnings As Warning() = Nothing
Dim streamids As String() = Nothing
Dim mineType As String = Nothing
Dim encoding As String = Nothing
Dim extension As String = Nothing
Dim bytes As Byte()

'PDFデータ取得
bytes = ReportViewer1.LocalReport.Render("PDF", Nothing, mineType, encoding, extension, streamids, warnings)

'PDFデータ書き出し
Dim outputfile As String = "指定ディレクトリ"
Dim snt As String = Now().ToString("yyyyMMddHHmmss")
outputfile += snt + "_" + sub_cd + "-" + targetid + ".pdf"

fileURL = "指定URLディレクトリ"
fileURL += snt + "_" + sub_cd + "-" + targetid + ".pdf"
Dim fs As New IO.FileStream(outputfile, IO.FileMode.Create)
fs.Write(bytes, 0, bytes.Length)
fs.Close()

Catch ex As Exception
fileURL = "0"

Finally
Dim result As New List(Of printInfo)
Dim pi As New printInfo()
pi.fileURL = fileURL
pi.alert1 = ""
pi.alert2 = ""
result.Add(pi)

Dim serializer As System.Web.Script.Serialization.JavaScriptSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
Response.Write(serializer.Serialize(result))
Response.End()

---------------
Public Class printInfo
Public fileURL As String
Public alert1 As String
Public alert2 As String
End Class

3)Webブラウザで(自動で)印刷する

//ファイル作成成否確認
if (fileURLdata[0].fileURL == "0") { alert("印刷用PDF作成に失敗しました"); (window.open('', '_self').opener = window).close(); }

//ファイル名取得
var fileURL = fileURLdata[0].fileURL;

//OBJECTタグを作成
var tid = 'objPdf' + targetid + 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('height', '1');
obj.setAttribute('width', '1');

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

//作成したOBJECTタグをDIVタグの中にセット
$("
<div id="pdfDiv&quot; + i + &quot;" style="border-style: none; height: 1px; width: 1px; background-color: #ffffff;"></div>
").appendTo($("#div_footter"));--差し障りの無い所へ追加
var div = document.getElementById('pdfDiv' + i);
div.appendChild(obj);
div.innerHTML = obj.outerHTML;

document.getElementById(tid).printAll();

以上です。

[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>