PDFをWebブラウザに簡単に表示する備忘録です。
- <embed src=”XXX.pdf”></embed>で表示する方法
- <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>