「HTML5+javascriptを使ってブラウザでEPUB３を作成する」の記事では、概略として簡略的にかいていたのを詳細に書いてみようと思う。
JSライブラリの読み込み
JSZIPで圧縮したファイルを生成するには。最低限次のようにjszipとFileSaverを読み込む。
indexhtml
<script type="text/javascript" src="js/jszip.min.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
ZIPの生成
コンソールで、myscriptをコピーして実行すると。sample.txtの内容がsampleでzip圧縮したexample.zipのファイルが生成される。
myscript
var zip = new JSZip();
zip.file("sample.txt", "sample");
zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "example.zip");
});
クリックしたら実行するようにする
onclickでクリックしたら上記のzip生成スクリプトを実行するとする。最近は、onclickではなく、addEventListenerを使うのが一般的である。
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jszip.min.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<button type="button" onclick="script()">
ファイルの生成
</button>
</body>
</html>
テキストエリアの内容を書き込む
ここからさらに、テキストエリアから読み込んだテキストをsample.txt内に書き込んでzip圧縮することをやってみる。
index.htmlに次の内容を追加する
index.html
<textarea id="textarea" rows="4" cols="40">ここにZIP圧縮する内容を書き込む</textarea>
myscript.jsを書き換える。
myscrpt.js
var sample= document.getElementById("textarea").value
var zip = new JSZip();
zip.file("sample.txt", sample);
これは、document.getElementByIdでIDがtextareaのテキストエリアの内容を読み込んでsampleに代入し。sampleの内容をsample.txtに書き込んでいる。