vue-files-preview
Version:
A tool for previewing files such as doc, excel, pdf, image, markdown, txt, audio, and video and so on.
1 lines • 4.38 kB
Source Map (JSON)
{"version":3,"file":"index.vue2.mjs","sources":["../../../../../../packages/preview/supports/epub-preview/index.vue"],"sourcesContent":["<script lang='ts' setup>\nimport {ref, watch} from 'vue'\nimport ePub from 'epubjs'\nimport type {PreviewProps} from '../../preview.interface'\nimport {getFileRenderByFile} from '../../utils/utils'\n\nconst props = withDefaults(\n defineProps<PreviewProps & {\n width?: string\n height?: string\n }>(),\n {\n url: () => null,\n file: () => null,\n width: () => '100%',\n height: () => '100%',\n },\n)\n\nconst navigation = ref()\nconst locations = ref()\nconst currentPage = ref(1)\nconst totalPages = ref()\nconst bookAvailable = ref(false)\nconst book = ref()\nconst rendition = ref()\n\nfunction initEpub(): void {\n if (props.file) {\n getFileRenderByFile(props.file).then((render) => {\n book.value = ePub(render as ArrayBuffer)\n rendition.value = book.value.renderTo('epub-viewer', {\n // 滚动模式\n width: '100%',\n height: 'calc(100vh - 80x)',\n flow: 'scrolled',\n allowScriptedContent: true,\n })\n book.value.ready.then(() => {\n navigation.value = book.value.navigation\n locations.value = book.value.locations\n bookAvailable.value = true\n // // 获取总页数\n totalPages.value = locations.value.length()\n rendition.value.display()\n })\n })\n }\n}\n\nwatch(\n () => props.file,\n () => {\n initEpub()\n },\n {immediate: true},\n)\n\n// epub翻页\nfunction prevPage(): void {\n if (rendition.value) {\n rendition.value.prev()\n // 向前翻页时更新 currentPage\n currentPage.value--\n if (currentPage.value < 1) {\n currentPage.value = 1\n }\n }\n}\n\nfunction nextPage(): void {\n if (rendition.value) {\n rendition.value.next()\n // 向后翻页时更新 currentPage\n currentPage.value++\n if (currentPage.value > totalPages.value) {\n currentPage.value = totalPages.value\n }\n }\n}\n\nfunction prevKeyDown(e): void {\n e.preventDefault()\n}\n\nfunction downKeyDown(e): void {\n e.preventDefault()\n}\n\nonKeyStroke('ArrowLeft', () => {\n prevPage()\n})\n\nonKeyStroke('ArrowRight', () => {\n nextPage()\n})\n</script>\n\n<template>\n <div class=\"epub-preview epub-box\" :style=\"{ width, height }\">\n <button class=\"btn\" style=\"display: none\" @keydown=\"prevKeyDown\">\n 上一页\n </button>\n <div id=\"epub-viewer\" class=\"epub-viewer\"/>\n <button class=\"btn\" style=\"display: none\" @keydown=\"downKeyDown\">\n 下一页\n </button>\n </div>\n</template>\n\n<style scoped lang=\"scss\">\n.epub-box {\n height: 100vh;\n width: 100%;\n}\n\n.epub-viewer {\n padding: 10px;\n min-height: calc(100vh - 80px);\n max-height: calc(100vh - 80px);\n overflow: auto;\n}\n\n.footer {\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n}\n</style>\n"],"names":["props","__props","navigation","ref","locations","currentPage","totalPages","bookAvailable","book","rendition","initEpub","getFileRenderByFile","render","ePub","watch","prevPage","nextPage","prevKeyDown","downKeyDown","onKeyStroke"],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAaRC,IAAaC,KACbC,IAAYD,KACZE,IAAcF,EAAI,CAAC,GACnBG,IAAaH,KACbI,IAAgBJ,EAAI,EAAK,GACzBK,IAAOL,KACPM,IAAYN;AAElB,aAASO,IAAiB;AACxB,MAAIV,EAAM,QACRW,EAAoBX,EAAM,IAAI,EAAE,KAAK,CAACY,MAAW;AAC1C,QAAAJ,EAAA,QAAQK,EAAKD,CAAqB,GACvCH,EAAU,QAAQD,EAAK,MAAM,SAAS,eAAe;AAAA;AAAA,UAEnD,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,sBAAsB;AAAA,QAAA,CACvB,GACIA,EAAA,MAAM,MAAM,KAAK,MAAM;AACf,UAAAN,EAAA,QAAQM,EAAK,MAAM,YACpBJ,EAAA,QAAQI,EAAK,MAAM,WAC7BD,EAAc,QAAQ,IAEXD,EAAA,QAAQF,EAAU,MAAM,OAAO,GAC1CK,EAAU,MAAM;QAAQ,CACzB;AAAA,MAAA,CACF;AAAA,IAEL;AAEA,IAAAK;AAAA,MACI,MAAMd,EAAM;AAAA,MACZ,MAAM;AACK,QAAAU;MACX;AAAA,MACA,EAAC,WAAW,GAAI;AAAA,IAAA;AAIpB,aAASK,IAAiB;AACxB,MAAIN,EAAU,UACZA,EAAU,MAAM,QAEJJ,EAAA,SACRA,EAAY,QAAQ,MACtBA,EAAY,QAAQ;AAAA,IAG1B;AAEA,aAASW,IAAiB;AACxB,MAAIP,EAAU,UACZA,EAAU,MAAM,QAEJJ,EAAA,SACRA,EAAY,QAAQC,EAAW,UACjCD,EAAY,QAAQC,EAAW;AAAA,IAGrC;AAEA,aAASW,EAAY,GAAS;AAC5B,QAAE,eAAe;AAAA,IACnB;AAEA,aAASC,EAAY,GAAS;AAC5B,QAAE,eAAe;AAAA,IACnB;AAEA,WAAAC,EAAY,aAAa,MAAM;AACpB,MAAAJ;IAAA,CACV,GAEDI,EAAY,cAAc,MAAM;AACrB,MAAAH;IAAA,CACV;;;;;;;;;;;;;;;;;;;;;"}