docx.jsを使ってJavaScript処理内に記述のテキスト情報をWordファイルのテキスト情報として生成し、出力・ダウンロードする方法をご紹介します。
Contents
JavaScriptで記述のテキストをWordファイルとして出力・ダウンロードするCSSの記述
※以下は特に重要ではないので、必要に応じて変更して下さい。
<style>
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
}
.clWrap{
width:800px;
margin:0 auto;
text-align:center;
}
h1{
font-size:18px;
line-height:1.4em;
text-align:center;
font-weight:normal;
}
</style>
docx.jsを使ってJavaScriptで記述のテキストをWordファイルとして出力・ダウンロードするJavaScriptの記述
※jquery.min.js、base64.js、jszip.js、docx.jsファイルを読み込みます。DOCXjs()を宣言し、「宣言した変数.text(Wordに出力するテキスト)」でWordファイルにテキストが出力されます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./libs/base64.js"></script>
<script type="text/javascript" src="./libs/jszip/jszip.js"></script>
<script type="text/javascript" src="docx.js"></script>
<script>
function fncDoc() {
var doc = new DOCXjs();
doc.text('JavaScriptの処理内に記述のテキスト情報を');
doc.text('Wordファイルのテキスト情報として出力してます。');
var output = doc.output('datauri');
}
</script>
JavaScriptで記述のテキストをWordファイルとして出力・ダウンロードすHTMLの記述
※hrefにjavascript:fncDoc()を設定するとリンククリックでWordファイルがダウンロードできます。必要に応じて変更して下さい。
<div class="clWrap">
<h1>以下の「ダウンロード」リンククリック後しファイルをダウンロード後、<br />
ファイル名を「～.doc」「～.docs」に変更して開いてみて下さい。</h1>
<a href="javascript:fncDoc()">ダウンロード</a>
</div><!--/clWrap-->
docx.jsを使ってWordファイル出力するデモページ
ソース元：すごい！JavaScriptでMS Wordファイルを生成「DOCX.js」
ソース元：すごい！JavaScriptでMS Wordファイルを生成「DOCX.js」
テキストエリア等に入力させた文字をWordファイルとして生成したりも出来そうですが、MS WordがPCにインストールしてれば直接Wordを開いてテキストを入力した方が早いです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
