UNPKG

vue-book-reader

Version:

vue-book-reader is a vue wrapper for [foliate-js](https://github.com/johnfactotum/foliate-js) - library for rendering e-books in the browser. Supports EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental; requires PDF.js), or add support for other formats

564 lines (497 loc) 15.1 kB
const f = ` /* Copyright 2014 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ :root { --highlight-bg-color: rgb(180 0 170); --highlight-selected-bg-color: rgb(0 100 0); } @media screen and (forced-colors: active) { :root { --highlight-bg-color: Highlight; --highlight-selected-bg-color: ButtonText; } } .textLayer { position: absolute; text-align: initial; inset: 0; overflow: hidden; opacity: 0.25; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; } .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; } /* Only necessary in Google Chrome, see issue 14205, and most unfortunately * the problem doesn't show up in "text" reference tests. */ /*#if !MOZCENTRAL*/ .textLayer span.markedContent { top: 0; height: 0; } /*#endif*/ .textLayer .highlight { margin: -1px; padding: 1px; background-color: var(--highlight-bg-color); border-radius: 4px; } .textLayer .highlight.appended { position: initial; } .textLayer .highlight.begin { border-radius: 4px 0 0 4px; } .textLayer .highlight.end { border-radius: 0 4px 4px 0; } .textLayer .highlight.middle { border-radius: 0; } .textLayer .highlight.selected { background-color: var(--highlight-selected-bg-color); } .textLayer ::selection { /*#if !MOZCENTRAL*/ background: blue; /*#endif*/ background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */ } /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */ /*#if !MOZCENTRAL*/ .textLayer br::selection { background: transparent; } /*#endif*/ .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; } .textLayer .endOfContent.active { top: 0; } `, L = ` /* Copyright 2014 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ :root { --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>"); --input-focus-border-color: Highlight; --input-focus-outline: 1px solid Canvas; --input-unfocused-border-color: transparent; --input-disabled-border-color: transparent; --input-hover-border-color: black; --link-outline: none; } @media screen and (forced-colors: active) { :root { --input-focus-border-color: CanvasText; --input-unfocused-border-color: ActiveText; --input-disabled-border-color: GrayText; --input-hover-border-color: Highlight; --link-outline: 1.5px solid LinkText; --hcm-highligh-filter: invert(100%); } .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required { outline: 1.5px solid selectedItem; } .annotationLayer .linkAnnotation:hover { backdrop-filter: var(--hcm-highligh-filter); } .annotationLayer .linkAnnotation > a:hover { opacity: 0 !important; background: none !important; box-shadow: none; } .annotationLayer .popupAnnotation .popup { outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important; background-color: ButtonFace !important; color: ButtonText !important; } .annotationLayer .highlightArea:hover::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: var(--hcm-highligh-filter); content: ""; pointer-events: none; } .annotationLayer .popupAnnotation.focused .popup { outline: calc(3px * var(--scale-factor)) solid Highlight !important; } } .annotationLayer { position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 0 0; z-index: 3; } .annotationLayer[data-main-rotation="90"] .norotate { transform: rotate(270deg) translateX(-100%); } .annotationLayer[data-main-rotation="180"] .norotate { transform: rotate(180deg) translate(-100%, -100%); } .annotationLayer[data-main-rotation="270"] .norotate { transform: rotate(90deg) translateY(-100%); } .annotationLayer canvas { position: absolute; width: 100%; height: 100%; pointer-events: none; } .annotationLayer section { position: absolute; text-align: initial; pointer-events: auto; box-sizing: border-box; transform-origin: 0 0; } .annotationLayer .linkAnnotation { outline: var(--link-outline); } .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a { position: absolute; font-size: 1em; top: 0; left: 0; width: 100%; height: 100%; } .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover { opacity: 0.2; background-color: rgb(255 255 0); box-shadow: 0 2px 10px rgb(255 255 0); } .annotationLayer .linkAnnotation.hasBorder:hover { background-color: rgb(255 255 0 / 0.2); } .annotationLayer .hasBorder { background-size: 100% 100%; } .annotationLayer .textAnnotation img { position: absolute; cursor: pointer; width: 100%; height: 100%; top: 0; left: 0; } .annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input { background-image: var(--annotation-unfocused-field-background); border: 2px solid var(--input-unfocused-border-color); box-sizing: border-box; font: calc(9px * var(--scale-factor)) sans-serif; height: 100%; margin: 0; vertical-align: top; width: 100%; } .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required { outline: 1.5px solid red; } .annotationLayer .choiceWidgetAnnotation select option { padding: 0; } .annotationLayer .buttonWidgetAnnotation.radioButton input { border-radius: 50%; } .annotationLayer .textWidgetAnnotation textarea { resize: none; } .annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled], .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] { background: none; border: 2px solid var(--input-disabled-border-color); cursor: not-allowed; } .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover { border: 2px solid var(--input-hover-border-color); } .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover { border-radius: 2px; } .annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus { background: none; border: 2px solid var(--input-focus-border-color); border-radius: 2px; outline: var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus { background-image: none; background-color: transparent; } .annotationLayer .buttonWidgetAnnotation.checkBox :focus { border: 2px solid var(--input-focus-border-color); border-radius: 2px; outline: var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.radioButton :focus { border: 2px solid var(--input-focus-border-color); outline: var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after, .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { background-color: CanvasText; content: ""; display: block; position: absolute; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after { height: 80%; left: 45%; width: 1px; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before { transform: rotate(45deg); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after { transform: rotate(-45deg); } .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { border-radius: 50%; height: 50%; left: 30%; top: 20%; width: 50%; } .annotationLayer .textWidgetAnnotation input.comb { font-family: monospace; padding-left: 2px; padding-right: 0; } .annotationLayer .textWidgetAnnotation input.comb:focus { /* * Letter spacing is placed on the right side of each character. Hence, the * letter spacing of the last character may be placed outside the visible * area, causing horizontal scrolling. We avoid this by extending the width * when the element has focus and revert this when it loses focus. */ width: 103%; } .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input { appearance: none; } .annotationLayer .fileAttachmentAnnotation .popupTriggerArea { height: 100%; width: 100%; } .annotationLayer .popupAnnotation { position: absolute; font-size: calc(9px * var(--scale-factor)); pointer-events: none; width: max-content; max-width: 45%; height: auto; } .annotationLayer .popup { background-color: rgb(255 255 153); box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136); border-radius: calc(2px * var(--scale-factor)); outline: 1.5px solid rgb(255 255 74); padding: calc(6px * var(--scale-factor)); cursor: pointer; font: message-box; white-space: normal; word-wrap: break-word; pointer-events: auto; } .annotationLayer .popupAnnotation.focused .popup { outline-width: 3px; } .annotationLayer .popup * { font-size: calc(9px * var(--scale-factor)); } .annotationLayer .popup > .header { display: inline-block; } .annotationLayer .popup > .header h1 { display: inline; } .annotationLayer .popup > .header .popupDate { display: inline-block; margin-left: calc(5px * var(--scale-factor)); width: fit-content; } .annotationLayer .popupContent { border-top: 1px solid rgb(51 51 51); margin-top: calc(2px * var(--scale-factor)); padding-top: calc(2px * var(--scale-factor)); } .annotationLayer .richText > * { white-space: pre-wrap; font-size: calc(9px * var(--scale-factor)); } .annotationLayer .popupTriggerArea { cursor: pointer; } .annotationLayer section svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .annotationLayer .annotationTextContent { position: absolute; width: 100%; height: 100%; opacity: 0; color: transparent; user-select: none; pointer-events: none; } .annotationLayer .annotationTextContent span { width: 100%; display: inline-block; } .annotationLayer svg.quadrilateralsContainer { contain: strict; width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: -1; } `, g = async (e, u) => { const o = e.getViewport({ scale: 1 }), a = o.width / o.height, d = innerWidth / innerHeight / a, l = devicePixelRatio * d, r = e.getViewport({ scale: l }), n = document.createElement("canvas"); n.height = r.height, n.width = r.width; const t = n.getContext("2d"); await e.render({ canvasContext: t, viewport: r }).promise; const i = await new Promise((p) => n.toBlob(p)); if (u) return i; const s = document.createElement("div"); s.classList.add("textLayer"), await pdfjsLib.renderTextLayer({ textContentSource: await e.getTextContent(), container: s, viewport: r }).promise; const h = document.createElement("div"); h.classList.add("annotationLayer"), await new pdfjsLib.AnnotationLayer({ page: e, viewport: r, div: h }).render({ annotations: await e.getAnnotations(), linkService: { getDestinationHash: (p) => JSON.stringify(p), addLinkAttributes: (p, y) => p.href = y } }); const x = URL.createObjectURL(i); return URL.createObjectURL(new Blob([` <!DOCTYPE html> <meta charset="utf-8"> <style> :root { --scale-factor: ${l}; } html, body { margin: 0; padding: 0; } ${f} ${L} </style> <img src="${x}"> ${s.outerHTML} ${h.outerHTML} `], { type: "text/html" })); }, b = (e) => ({ label: e.title, href: JSON.stringify(e.dest), subitems: e.items.length ? e.items.map(b) : null }), v = async (e) => { var r; const u = new Uint8Array(await e.arrayBuffer()), o = await pdfjsLib.getDocument({ data: u }).promise, a = { rendition: { layout: "pre-paginated" } }, c = (r = await o.getMetadata()) == null ? void 0 : r.info; a.metadata = { title: c == null ? void 0 : c.Title, author: c == null ? void 0 : c.Author }; const d = await o.getOutline(); a.toc = d == null ? void 0 : d.map(b); const l = /* @__PURE__ */ new Map(); return a.sections = Array.from({ length: o.numPages }).map((n, t) => ({ id: t, load: async () => { const i = l.get(t); if (i) return i; const s = await g(await o.getPage(t + 1)); return l.set(t, s), s; }, size: 1e3 })), a.sections[0].pageSpread = "right", a.isExternal = (n) => /^\w+:/i.test(n), a.resolveHref = async (n) => { const t = JSON.parse(n), i = typeof t == "string" ? await o.getDestination(t) : t; return { index: await o.getPageIndex(i[0]) }; }, a.splitTOCHref = async (n) => { const t = JSON.parse(n), i = typeof t == "string" ? await o.getDestination(t) : t; return [await o.getPageIndex(i[0]), null]; }, a.getTOCFragment = (n) => n.documentElement, a.getCover = async () => g(await o.getPage(1), !0), a; }; export { v as makePDF };