JavaScript

JavaScriptでWordファイルを生成・ダウンロード！docx.js活用ガイド

  /

JavaScriptを活用して、ユーザーの入力テキストをWordファイルとして生成し、そのファイルをダウンロードする技術についてご紹介します。
これは、ウェブアプリケーションでのレポート生成、フォーム入力結果の文書化、あるいは動的に内容が変わる文書をユーザーに提供する際に役立ちます。
今回は、docx.jsというJavaScriptライブラリを用いる方法を中心に解説します。

Contents

はじめに

文書作成の自動化や、ウェブページから直接文書を生成する技術は、多くの業界で需要があります。例えば、オンラインでのアンケート結果をWord文書でダウンロードしたい、またはウェブアプリケーションからレポートを生成し、その場で提供したい場合などです。JavaScriptを用いて、これらのニーズに応える方法を一緒に見ていきましょう。

CSSの基本的な設定

まず、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>

　
このCSSは、文書の読みやすさを保つために最適化されています。ページの中央にコンテンツを配置し、見出しを適切に強調表示します。

JavaScriptでWordファイルを生成する

docx.jsライブラリを使用して、実際に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>

　
このコードスニペットは、fncDoc関数を定義しています。この関数は、新しいWord文書を作成し、そこにテキストを追加した後、データURIとして出力します。これにより、ユーザーは生成されたWordファイルを直接ダウンロードできます。

HTMLでダウンロードリンクを設定する

ユーザーが生成されたWordファイルをダウンロードできるように、HTML内にダウンロードリンクを設定します。
hrefにjavascript:fncDoc()を設定するとリンククリックでWordファイルがダウンロードできます。

<div class="clWrap">
    <h1>以下の「ダウンロード」リンククリック後しファイルをダウンロード後、<br />
    ファイル名を「～.doc」「～.docs」に変更して開いてみて下さい。</h1>

	<a href="javascript:fncDoc()">ダウンロード</a>
</div><!--/clWrap-->

　
このリンクをクリックすると、fncDoc関数が実行され、ユーザーに対してWordファイルがダウンロードされます。ファイル名は、ダウンロード後にユーザーが任意で変更できます。

docx.jsを使ってWordファイル出力するデモページ

この技術のデモページは、以下のリンクからアクセスできます。

docx.jsを使ってWordファイル出力するデモ

ソース元：すごい！JavaScriptでMS Wordファイルを生成「DOCX.js」

すごい！JavaScriptでMS Wordファイルを生成「DOCX.js」

テキストエリア等に入力させた文字をWordファイルとして生成したりも出来そうですが、MS WordがPCにインストールしてれば直接Wordを開いてテキストを入力した方が早いです。

まとめ

JavaScriptを使ったWordファイルの動的生成とダウンロードは、多くのウェブアプリケーションで役立つ技術です。docx.jsライブラリを使用することで、開発者は容易にこの機能を実装でき、ユーザーにとって価値ある文書を提供できます。本記事が、この技術の基本を理解し、自身のプロジェクトに応用するための出発点となれば幸いです。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

docx.js word
関連記事