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