jQuery + jPrintAreaを利用して、埋め込んだExcelワークブック部分のみを印刷する方法を紹介します。
下記コードではGoogle Libraries APIを利用してjQueryを読み込んでいますが、バージョンを1.4にしている理由は特にありません。
※ ローカルサーバー上でテストした際には問題なく印刷できたのですが、当ブログ上(WordPress上)から印刷した際はなぜかキレイに出力されません。原因は未調査で、何か分かり次第対応する予定です。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.4");</script>
<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
<script type="text/javascript">
/*
* jPrintArea(http://www.designerkamal.com/jPrintArea/)にjsファイルが無かったので
* Internet Archive(http://j.mp/rTnPBB)からコード取得
*/
jQuery.jPrintArea = function(el) {
var iframe = document.createElement('IFRAME');
var doc = null;
$(iframe).attr('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
var links = window.document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
if (links[i].rel.toLowerCase() == 'stylesheet') {
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
}
doc.write('<div class="' + $(el).attr("class") + '">' + $(el).html() + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
//alert('Printing...'); thanks alex
alert('印刷しています。');
wait(1);
document.body.removeChild(iframe);;
}
}
$(document).ready(function() {
$('#btnPrint').click(function(){$.jPrintArea('#myExcelDiv')});
});
var fileToken = "SD92A165759188B352!260/-7880906317294423214/";
if (window.attachEvent) {
window.attachEvent("onload", loadEwaOnPageLoad);
} else {
window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
}
function loadEwaOnPageLoad() {
var props = {
uiOptions: {
showGridlines: false,
showRowColumnHeaders: false
},
interactivityOptions: { }
};
Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
}
function onEwaLoaded(result) { }
</script>
<input type="button" id="btnPrint" value="印刷する"></input>
<div id="myExcelDiv" style="width: 600px; height: 500px"></div>
・印刷範囲を指定できるjavascript「jPrintArea」
http://www.skuare.net/2007/10/javascriptjprintarea.html


















この記事へのコメントはありません。