zh/searchurl/txt/epub.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4   <head>
   5     <meta charset="utf-8">
   6     <meta name="viewport"
   7           content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
   8     <title>EPUB</title>
   9     <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
  10     <script src="https://fastly.jsdelivr.net/npm/epubjs@0.3.88/dist/epub.min.js"></script>
  11     <script>
  12       document.addEventListener('DOMContentLoaded', () => {
  13         const html = document.querySelector('html')
  14         let fontSize = window.innerWidth / 10
  15         fontSize = fontSize > 50 ? 50 : fontSize
  16         html.style.fontSize = fontSize + 'px'
  17       })
  18     </script>
  19     <style>
  20       * {
  21           padding: 0;
  22           margin: 0;
  23       }
  24
  25       .mask {
  26           position: absolute;
  27           display: flex;
  28           left: 0;
  29           width: 100%;
  30           height: 100%;
  31           flex-direction: column;
  32       }
  33
  34       .meun {
  35           display: flex;
  36           height: 1rem;
  37           align-items: center;
  38       }
  39
  40       #toc {
  41           flex: 1;
  42           z-index: 100;
  43           font-size: .3rem;
  44           padding-left: .4rem;
  45           color: #333;
  46       }
  47
  48       #page {
  49           z-index: 100;
  50           font-size: .3rem;
  51           color: #333;
  52           padding-right: 0.4rem;
  53           text-align: right;
  54           flex: 0 0 .5rem;
  55       }
  56
  57       #load {
  58           z-index: 100;
  59           font-size: .3rem;
  60           color: #333;
  61           padding-right: 0.4rem;
  62           text-align: right;
  63           flex: 0 0 .5rem;
  64       }
  65
  66       #toc-content {
  67           position: absolute;
  68           display: flex;
  69           top: 0;
  70           right: 0;
  71           z-index: 102;
  72           min-width: auto;
  73           max-width: 80%;
  74           height: 100%;
  75           background: white;
  76           flex-direction: column
  77       }
  78
  79       #toc-mask {
  80           position: absolute;
  81           top: 0;
  82           left: 0;
  83           z-index: 101;
  84           width: 100%;
  85           height: 100%;
  86           background: rgba(51, 51, 51, .8);
  87       }
  88
  89       .intro {
  90           width: 100%;
  91           height: 2.4rem;
  92           padding: .2rem .4rem;
  93           box-sizing: border-box;
  94           height: 3rem;
  95           display: flex;
  96           border-bottom: .1rem solid #f4f4f4;
  97       }
  98
  99       .txt {
 100           display: flex;
 101           flex: 1;
 102           align-items: center;
 103           padding: 0 .2rem;
 104           font-size: .3rem;
 105       }
 106
 107       #content {
 108           overflow-y: auto;
 109       }
 110
 111       .item {
 112           padding: .2rem .4rem;
 113           border-bottom: .07rem solid #f4f4f4;
 114           font-size: .4rem;
 115           color: #333;
 116       }
 117
 118       #open {
 119           display: flex;
 120           flex: 1;
 121           z-index: 100;
 122           font-size: .4rem;
 123           color: #333;
 124           align-items: flex-end;
 125           justify-content: center;
 126
 127       }
 128
 129       #open span {
 130           padding: .3rem .3rem;
 131           border: .05rem solid #333;
 132           border-radius: .2rem;
 133       }
 134
 135       .read {
 136           display: flex;
 137           flex: 1 1 auto;
 138       }
 139
 140       #prev {
 141           flex: 0 0 2rem;
 142           z-index: 100;
 143       }
 144
 145       #viewer {
 146           flex: 1;
 147       }
 148
 149       #next {
 150           flex: 0 0 2rem;
 151           z-index: 100;
 152       }
 153
 154       .save {
 155           display: flex;
 156       }
 157
 158       .box {
 159           padding: .2rem .2rem;
 160           justify-content: center;
 161           border-bottom: .1rem solid #f4f4f4;
 162       }
 163
 164       .jump {
 165           display: flex;
 166           height: 1rem;
 167           border-bottom: .1rem solid #f4f4f4;
 168       }
 169
 170       .jump input {
 171           flex: 1;
 172           padding: .1rem .1rem;
 173           margin: .2rem .2rem .2rem .4rem;
 174           outline: none;
 175           font-size: .3rem;
 176       }
 177
 178       .jump span {
 179           flex: 0 0 1rem;
 180       }
 181     </style>
 182   </head>
 183
 184   <body>
 185     <div id="ebook">
 186       <div class="mask">
 187         <div id="open">
 188           <span
 189             onclick="document.getElementById('input').click();document.getElementById('open').style.display = 'none'">选择本地书籍</span>
 190           <input type="file" id="input" style="display: none;">
 191         </div>
 192         <div class="read">
 193           <div id="prev" onclick="rendition.prev()"></div>
 194           <div id="viewer"></div>
 195           <div id="next" onclick="rendition.next()"></div>
 196         </div>
 197         <div class="meun">
 198           <div id="toc" onclick="showhide()"></div>
 199           <div id="page"></div>
 200           <div id="load"></div>
 201         </div>
 202         <div id="toc-mask" style="display: none;" onclick="showhide()"></div>
 203         <div id="toc-content" style="display: none;">
 204           <div class="intro">
 205             <img id="cover">
 206             <div style="display: flex;flex: 1;flex-direction: column;overflow-y: auto;">
 207               <div id="title" class="txt"></div>
 208               <div id="author" class="txt"></div>
 209               <div id="publisher" class="txt"></div>
 210               <div id="pubdate" class="txt"></div>
 211             </div>
 212           </div>
 213           <div class="save">
 214             <div class="txt box" onclick="save()">存档</div>
 215             <div class="txt box" onclick="get()">读档</div>
 216             <div class="txt box" onclick="del()">删档</div>
 217           </div>
 218           <div class="jump">
 219             <input id="jump" type="number" placeholder="0-1之间的数字，如0.25"
 220                    oninput="if(value>1)value=1;if(value<0)value=0">
 221             <span class="txt" onclick="jump()">跳转</span>
 222           </div>
 223           <div id="content"></div>
 224         </div>
 225       </div>
 226     </div>
 227     <script>
 228       let url = location.search.substring(3);
 229       if (url !== "") {
 230         var book = ePub(url);
 231         document.getElementById("open").style.display = "none"
 232       } else {
 233         var book = ePub();
 234         var inputElement = document.getElementById("input");
 235         inputElement.addEventListener('change', function (e) {
 236           var file = e.target.files[0];
 237           if (window.FileReader) {
 238             var reader = new FileReader();
 239             reader.onload = openBook;
 240             reader.readAsArrayBuffer(file);
 241           }
 242         });
 243         function openBook(e) {
 244           var bookData = e.target.result;
 245           book.open(bookData, "binary");
 246         }
 247       }
 248       //渲染
 249       var rendition = book.renderTo("ebook", {
 250         with: window.innerWidth,
 251         height: window.innerHeight - 20
 252       });
 253       rendition.display();
 254
 255       book.ready
 256   .then(() => {
 257     var local = localStorage.getItem(book.key() + '-locations');
 258     if (local) {
 259       return book.locations.load(local);
 260     } else {
 261       return book.locations.generate();
 262     }
 263   })
 264   .then(locations => {
 265     localStorage.setItem(book.key() + '-locations', book.locations.save());
 266   })
 267
 268       // 目录
 269       book.loaded.navigation.then(toc => {
 270         var read = localStorage.getItem(book.key() + '-read');
 271         if (read) {
 272           rendition.display(read);
 273         }
 274         var $content = document.getElementById("content");
 275         toc.forEach(item => {
 276           var div = document.createElement("div");
 277           div.className = "item";
 278           div.textContent = item.label;
 279           div.addEventListener("click", () => {
 280             rendition.display(item.href);
 281             showhide()
 282           });
 283           $content.appendChild(div)
 284         })
 285       })
 286       //简介
 287       book.loaded.metadata.then(meta => {
 288         var $title = document.getElementById("title");
 289         var $author = document.getElementById("author");
 290         var $cover = document.getElementById("cover");
 291         var $publisher = document.getElementById("publisher");
 292         var $pubdate = document.getElementById("pubdate");
 293         $title.textContent = `书名：${meta.title}`;
 294         $author.textContent = `作者：${meta.creator}`;
 295         $publisher.textContent = `出版社：${meta.publisher}`;
 296         $pubdate.textContent = `时间：${meta.pubdate}`;
 297         if (book.archive) {
 298           book.archive.createUrl(book.cover)
 299             .then(url => {
 300               $cover.src = url;
 301             })
 302         } else {
 303           $cover.src = book.cover;
 304         }
 305       });
 306       //进度显示
 307       rendition.on('relocated', location => {
 308         var percent = book.locations.percentageFromCfi(location.start.cfi);
 309         var $page = document.getElementById("page");
 310         var $load = document.getElementById("load");
 311         $page.textContent = location.end.displayed.page + '/' + location.end.displayed.total;
 312         $load.textContent = Math.fround(percent * 100).toFixed(1) + '%';
 313       })
 314       //章节名显示
 315       rendition.on("rendered", section => {
 316         var $toc = document.getElementById("toc");
 317         $toc.textContent = "目录";
 318         $toc.textContent = book.navigation.get(section.href).label;
 319       })
 320       function showhide() {
 321         var $toc_content = document.getElementById("toc-content")
 322         var $mask = document.getElementById("toc-mask")
 323         if ($toc_content.style.display == "none") {
 324           $toc_content.style.display = ""
 325           $mask.style.display = ""
 326         } else {
 327           $toc_content.style.display = "none"
 328           $mask.style.display = "none"
 329         }
 330       }
 331       function jump() {
 332         $jump = document.getElementById("jump").value;
 333         rendition.display(book.locations.cfiFromPercentage($jump));
 334         showhide();
 335         document.getElementById("jump").value = "";
 336       }
 337       function save() {
 338         localStorage.setItem(book.key() + '-read', rendition.currentLocation().start.cfi)
 339         showhide()
 340       }
 341       function get() {
 342         rendition.display(localStorage.getItem(book.key() + '-read'));
 343         showhide()
 344       }
 345       function del() {
 346         localStorage.removeItem(book.key() + '-read');
 347         showhide()
 348       }
 349     </script>
 350   </body>
 351
 352 </html>