Help us understand the problem. What is going on with this article?

HTML5+javascriptでEPUB3を作成する(JSZip編)

More than 1 year has passed since last update.

「HTML5+javascriptを使ってブラウザでEPUB3を作成する」の記事では、概略として簡略的にかいていたのを詳細に書いてみようと思う。

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に書き込んでいる。

参考

JSZIPの使い方(英語)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした