var zip = new JSZip();
// https://cors-anywhere.herokuapp.com/
JSZipUtils.getBinaryContent('https://i.imgur.com/SEQutaS.jpg', function(err, data) {
if (err) {
throw err; // or handle the error
}
zip.file('cover_image.jpg', data, {
binary: true
});
});
document.getElementById('gen').onclick = function(e) {
e.preventDefault();
zip.file('mimetype', 'application/epub+zip');
zip.file('META-INF/container.xml', `<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
<rootfiles>
<rootfile full-path="content.opf" media-type="application/oebps-package+xml"/>
</rootfiles>
</container>`);
zip.file('page_styles.css', `@page {
margin-bottom: 5pt;
margin-top: 5pt
}`);
zip.file('stylesheet.css', `.bold {
font-weight: bold
}
.calibre {
display: block;
font-size: 1em;
padding-left: 0;
padding-right: 0;
text-align: justify;
margin: 0 5pt
}
.calibre1 {
display: block
}
.calibre2 {
display: block;
text-indent: 1.5em;
margin: 0
}`);
zip.file('titlepage.xhtml', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="vi">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="calibre:cover" content="true"/>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1200 1600" preserveAspectRatio="none">
<image width="1200" height="1600" xlink:href="cover_image.jpg"/>
</svg>
</div>
</body>
</html>`);
zip.file('page_1.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a id="page_1">
<br class="calibre1" />
</a>
<span class="bold">Chương 1: Tên chương</span>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<p class="calibre1" style="margin:0pt; border:0pt; height:1em"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt venenatis tempus. Pellentesque blandit sollicitudin eros in varius. Duis in tellus lobortis, aliquam libero in, venenatis metus. Integer luctus mauris sem, vitae euismod urna malesuada hendrerit. Proin id enim eget neque tempor bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel nunc vitae quam ultrices condimentum. Donec pellentesque pellentesque nulla. Quisque commodo non nunc eget imperdiet. Integer ut hendrerit lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<p class="calibre2"></p>
Duis mauris elit, pellentesque eu magna et, molestie bibendum eros. Vivamus non turpis et metus condimentum viverra. Cras lacus risus, feugiat et lectus a, consequat accumsan ipsum. Ut diam justo, cursus sed ultricies a, porttitor a enim. Vestibulum nisi sem, dictum eget porttitor ac, egestas vel purus. Maecenas eleifend sapien nec elementum varius. Ut arcu diam, volutpat at dignissim nec, accumsan eget dui. Nam viverra nibh eu est ultrices, sit amet egestas ipsum gravida. Aliquam elit erat, ullamcorper a viverra et, feugiat sit amet nibh. Sed congue risus sit amet lectus faucibus, a congue tortor eleifend. Aenean elementum lectus in iaculis tincidunt. Praesent tincidunt ante vitae urna hendrerit faucibus. Mauris eget cursus ligula. Vivamus vulputate erat in tellus malesuada, in tristique magna sagittis. Duis posuere ut dui vitae dictum. Sed hendrerit nisi diam, sit amet blandit leo tempor id.
<p class="calibre2"></p>
Morbi vitae enim ex. Ut ac ante tortor. Nulla aliquam urna in diam commodo sodales. Phasellus ex lectus, lobortis quis venenatis non, dictum vitae justo. Donec non aliquet est, in faucibus quam. Maecenas fermentum sit amet nunc a pharetra. Phasellus quis velit nibh. Nullam accumsan eleifend sapien ac pharetra. Nullam aliquet elit vitae urna commodo, ut consequat libero scelerisque. Vestibulum dolor risus, tempus sed velit vulputate, fringilla faucibus massa. Sed suscipit ipsum sit amet nisl sagittis venenatis. Ut quis ligula interdum velit pharetra tempor vitae ac nisl. Sed ipsum elit, convallis id tempor quis, maximus ut risus. Aenean vitae commodo orci.
</body>
</html>`);
zip.file('page_2.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a id="page_2">
<br class="calibre1" />
</a>
<span class="bold">Chương 2: Tên chương</span>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<p class="calibre1" style="margin:0pt; border:0pt; height:1em"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt magna nec nibh porta faucibus. Vivamus gravida ligula at mi faucibus, ut condimentum arcu sagittis. Etiam vulputate, diam ut faucibus interdum, mi ex bibendum odio, id condimentum odio diam dapibus nunc. Aenean nec blandit diam. Vivamus libero nisi, fermentum non tristique vel, condimentum vel sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed turpis orci.
<p class="calibre2"></p>
Nunc nec ipsum eget ante iaculis volutpat. Phasellus egestas nibh eu erat viverra, id interdum tellus dictum. Donec posuere metus et porta aliquam. Donec a pellentesque nibh. Maecenas id ultricies libero. Maecenas hendrerit convallis lectus et mollis. Nam et quam finibus, tempus nisi eu, feugiat nunc. Vestibulum neque ligula, ullamcorper vestibulum rhoncus at, ullamcorper quis lorem. Suspendisse potenti. Nam efficitur sed dolor vitae iaculis. Cras pulvinar sem turpis.
<p class="calibre2"></p>
Cras tincidunt massa et laoreet mattis. Nullam in orci varius, vestibulum leo a, ultricies lorem. Nullam vitae nulla tortor. Nullam gravida rutrum eros, at aliquet erat bibendum a. Proin auctor placerat mattis. Fusce tellus felis, commodo at convallis eget, fermentum volutpat diam. Donec cursus ullamcorper neque, sit amet ullamcorper mi posuere at. Donec ligula lectus, venenatis a risus quis, euismod sodales massa. Maecenas quis bibendum tortor. Nullam in imperdiet enim.
<p class="calibre2"></p>
Nam laoreet leo eget ante dictum elementum. Ut commodo lectus sit amet velit mattis, lobortis rutrum lacus mattis. Pellentesque tristique dui sed interdum placerat. Phasellus sit amet laoreet metus, at suscipit metus. Quisque facilisis leo id arcu pulvinar, eget placerat turpis vulputate. Aliquam bibendum ex purus, et dictum lectus tempor sit amet. Proin finibus pellentesque lorem. Nam metus tellus, tempus et tortor at, semper gravida ex. Sed tincidunt purus lorem. Praesent ac sagittis dolor.
</body>
</html>`);
zip.file('page_3.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a id="page_3">
<br class="calibre1" />
</a>
<span class="bold">Chương 3: Tên chương</span>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<p class="calibre1" style="margin:0pt; border:0pt; height:1em"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor lorem id porttitor viverra. In vehicula varius lacinia. Donec rutrum felis ac ligula facilisis porta. Ut pretium neque nec dapibus consectetur. Cras vitae malesuada libero, sit amet consectetur nisi. Sed aliquam orci eu mi sollicitudin, interdum dignissim velit vulputate. Fusce luctus efficitur laoreet. Phasellus non convallis felis. Mauris pellentesque in nisl sed eleifend.
<p class="calibre2"></p>
Integer eget nunc tellus. Integer sit amet massa vitae mauris ullamcorper varius sit amet ac augue. Nullam ac urna euismod, lobortis nisi nec, gravida nibh. Morbi id arcu varius, cursus neque vitae, sollicitudin orci. Donec vulputate dapibus felis, non bibendum eros aliquam id. Duis et augue sapien. Suspendisse potenti. Donec accumsan ornare leo, a porttitor risus tincidunt at. Vivamus a ligula ac ligula tincidunt feugiat. Morbi sed magna nunc. Nam venenatis porta lectus. Fusce non nulla dui.
<p class="calibre2"></p>
Fusce vehicula augue at arcu cursus ornare. Quisque at rhoncus justo. In rhoncus enim ligula, ac ornare risus imperdiet vitae. Nunc id orci condimentum, bibendum purus ac, tempus dolor. Fusce cursus tortor nec lorem auctor, eu venenatis sapien gravida. Fusce nec neque mi. Ut nec mauris ullamcorper, elementum risus eu, dictum neque.
</body>
</html>`);
zip.file('page_4.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a id="page_4">
<br class="calibre1" />
</a>
<span class="bold">Chương 4: Tên chương</span>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<p class="calibre1" style="margin:0pt; border:0pt; height:1em"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis ultrices mi id mollis. Ut commodo quam et ex hendrerit lobortis. Cras sit amet turpis luctus, molestie justo ut, rutrum lacus. Mauris ullamcorper pellentesque nunc, in auctor enim ultrices in. Nunc lacinia diam erat, a pharetra orci ornare vel. Vivamus rutrum ex eu congue pellentesque. Sed facilisis dui dui, sit amet faucibus sapien tempor ut. Donec accumsan ligula neque, nec consequat sapien egestas eget. Curabitur mollis eros eu aliquet feugiat. Praesent ultrices facilisis posuere. Duis placerat diam vulputate lorem ornare, eget euismod justo pellentesque. Donec sed consequat felis, nec vehicula elit. Integer bibendum, risus vel molestie imperdiet, odio nunc hendrerit neque, in ornare enim ligula nec felis. Donec sit amet ante nec lacus pretium mollis vitae sed sem.
<p class="calibre2"></p>
Pellentesque accumsan ante eu lacus egestas ultricies. Maecenas elementum erat in urna imperdiet consequat. Vestibulum tincidunt sollicitudin egestas. Fusce sagittis urna urna, ac aliquet lectus tincidunt id. Donec tincidunt venenatis sapien, id pulvinar est tempor ut. Curabitur commodo sem sit amet nunc iaculis, non mattis dui suscipit. Integer interdum sapien dui, sed fringilla ligula varius eu. Proin id nibh porta ligula vulputate gravida.
</body>
</html>`);
zip.file('page_5.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a id="page_5">
<br class="calibre1" />
</a>
<span class="bold">Chương 5: Tên chương</span>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<p class="calibre1" style="margin:0pt; border:0pt; height:1em"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet eros interdum, elementum nulla eget, sagittis augue. Nunc in lobortis risus, vel suscipit purus. Mauris vulputate a erat semper condimentum. Duis in dui eros. Vivamus dignissim commodo mauris vel tristique. Pellentesque eleifend tempor nunc in lobortis. Nullam volutpat luctus massa, sed dictum neque hendrerit vel. Pellentesque sed interdum dolor. Vivamus tempus, nulla sit amet tristique vehicula, nisl nibh facilisis ex, ac blandit quam arcu in ante.
<p class="calibre2"></p>
Mauris varius nec justo quis blandit. Vivamus id quam in nisi posuere malesuada vitae vitae sapien. Maecenas tempor aliquet blandit. Sed sit amet odio vel velit tincidunt eleifend. Fusce a mattis mauris. Vivamus sem risus, scelerisque vitae turpis et, vulputate mattis justo. Morbi tempor mi sit amet neque faucibus dignissim.
<p class="calibre2"></p>
Donec id arcu id libero tempus scelerisque. Ut at lectus in arcu volutpat luctus. Vestibulum nec justo nisi. Suspendisse suscipit pulvinar pretium. Nullam at porttitor nibh, faucibus mattis ipsum. Etiam a viverra tortor. Curabitur vehicula diam sed augue elementum varius. Cras augue libero, gravida a nibh ac, tristique dapibus enim. Duis elementum diam lectus, ut lobortis nulla feugiat ut. Sed ullamcorper erat non aliquam mattis. Donec varius odio ac eros ultricies, at lacinia massa aliquam. Etiam elementum hendrerit lacus. Nunc tortor enim, sodales et sagittis sit amet, consequat sed nisi. Mauris quis accumsan turpis.
</body>
</html>`);
zip.file('page_6.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a id="page_6">
<br class="calibre1" />
</a>
<span class="bold">Chương 6: Tên chương</span>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<p class="calibre1" style="margin:0pt; border:0pt; height:1em"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum varius est, sed venenatis mi blandit eget. Nam pulvinar, ex interdum venenatis efficitur, velit enim consectetur eros, in sodales ligula leo non massa. Etiam eget est pulvinar, pellentesque eros at, varius mauris. Morbi ornare tellus ac mi dignissim, ac malesuada nisl posuere. Praesent dui turpis, malesuada at est vel, facilisis scelerisque felis. Nulla cursus felis vitae ipsum dictum, ut convallis tellus ultrices. Donec varius convallis enim, quis pretium tortor gravida convallis. Donec pharetra, est sit amet varius fermentum, metus mauris scelerisque sapien, ut luctus urna augue in mauris. Mauris risus lacus, ultrices condimentum varius ac, congue ut massa. Phasellus mattis nisi ante, eget facilisis nunc euismod non. Ut ultricies tortor mi, a maximus arcu dapibus at. Nullam tincidunt lectus consectetur magna pulvinar, vel lobortis tortor posuere. Vestibulum diam magna, faucibus quis ultrices at, elementum sed urna.
</body>
</html>`);
zip.file('page_7.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a id="page_7">
<br class="calibre1" />
</a>
<span class="bold">Chương 7: Tên chương</span>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<p class="calibre1" style="margin:0pt; border:0pt; height:1em"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus suscipit mi non porttitor. Aenean vulputate ante in rhoncus tristique. Integer at elit odio. Nam consectetur rhoncus odio in ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel orci condimentum, feugiat justo ut, consequat eros. Integer vestibulum laoreet libero ac posuere. Donec nunc nunc, porttitor sit amet condimentum sit amet, imperdiet eu lectus. Donec finibus est ac ultrices sollicitudin. Quisque sed lorem sed ipsum tristique pulvinar sit amet at urna. Nunc enim diam, mollis a iaculis in, vulputate et elit. Nunc commodo consectetur est a blandit. Suspendisse vitae nisi turpis. Integer tristique mollis lectus, vel consectetur neque hendrerit nec. Vestibulum congue a tellus non varius.
<p class="calibre2"></p>
Phasellus congue orci magna, sit amet volutpat lacus ultricies eu. Aenean sed quam congue, pulvinar risus eget, accumsan enim. Sed eu elit nibh. Suspendisse sagittis purus nec sollicitudin egestas. Duis eu lobortis lacus. Nam scelerisque lacinia fringilla. Integer dapibus blandit iaculis. Phasellus pellentesque venenatis bibendum. Praesent aliquet elit nec tortor consectetur, at commodo metus accumsan. Maecenas eget odio id sem varius efficitur et quis felis.
<p class="calibre2"></p>
Nulla ut posuere elit. Vivamus nec erat felis. Nulla efficitur ante non interdum dapibus. Etiam tincidunt, libero ac hendrerit pulvinar, turpis orci luctus elit, et interdum ante arcu a tellus. Mauris a felis sem. Aenean in purus quis urna aliquet venenatis. Quisque pulvinar ipsum nec porttitor pharetra. Nunc ut tincidunt metus. Morbi eu vulputate purus, et feugiat eros. Donec sed interdum tellus.
</body>
</html>`);
zip.file('toc.html', `<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tên truyện</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="page_styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="calibre">
<a href="page_1.html">Chương 1: Tên chương</a>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<a href="page_2.html">Chương 2: Tên chương</a>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<a href="page_3.html">Chương 3: Tên chương</a>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<a href="page_4.html">Chương 4: Tên chương</a>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<a href="page_5.html">Chương 5: Tên chương</a>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<a href="page_6.html">Chương 6: Tên chương</a>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
<a href="page_7.html">Chương 7: Tên chương</a>
<p class="calibre1" style="margin:0pt; border:0pt; height:0pt"> </p>
</body>
</html>`);
zip.file('toc.ncx', `<?xml version='1.0' encoding='utf-8'?>
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="vi">
<head>
<meta content="cb0ed420-c66c-480e-a5ef-0fee2bbc0ba0" name="dtb:uid"/>
<meta content="2" name="dtb:depth"/>
<meta content="calibre (2.41.0)" name="dtb:generator"/>
<meta content="0" name="dtb:totalPageCount"/>
<meta content="0" name="dtb:maxPageNumber"/>
</head>
<docTitle>
<text>Tên truyện</text>
</docTitle>
<navMap>
<navPoint id="toc" playOrder="1">
<navLabel>
<text>Mục lục</text>
</navLabel>
<content src="toc.html#toc"/>
</navPoint>
<navPoint id="nav_1" playOrder="2">
<navLabel>
<text>Chương 1: Tên chương</text>
</navLabel>
<content src="page_1.html#page_1"/>
</navPoint>
<navPoint id="nav_2" playOrder="3">
<navLabel>
<text>Chương 2: Tên chương</text>
</navLabel>
<content src="page_2.html#page_2"/>
</navPoint>
<navPoint id="nav_3" playOrder="4">
<navLabel>
<text>Chương 3: Tên chương</text>
</navLabel>
<content src="page_3.html#page_3"/>
</navPoint>
<navPoint id="nav_4" playOrder="5">
<navLabel>
<text>Chương 4: Tên chương</text>
</navLabel>
<content src="page_4.html#page_4"/>
</navPoint>
<navPoint id="nav_5" playOrder="6">
<navLabel>
<text>Chương 5: Tên chương</text>
</navLabel>
<content src="page_5.html#page_5"/>
</navPoint>
<navPoint id="nav_6" playOrder="7">
<navLabel>
<text>Chương 6: Tên chương</text>
</navLabel>
<content src="page_6.html#page_6"/>
</navPoint>
<navPoint id="nav_7" playOrder="8">
<navLabel>
<text>Chương 7: Tên chương</text>
</navLabel>
<content src="page_7.html#page_7"/>
</navPoint>
</navMap>
</ncx>`);
zip.generateAsync({
type: 'blob',
mimeType: 'application/epub+zip',
compression: 'DEFLATE',
compressionOptions: {
level: 9
}
})
.then(function(content) {
saveAs(content, 'example.epub');
})
};
<p>
<button id="gen">Generate</button>
</p>