Open YeAhzjx opened 2 months ago
I can not take the company's double-leaf pdf for display, so I took a single-page pdf for display By the way, I'm terrible at it. Forgive me my browser:chrome 123.0.6312.123 my code:
<template> <div class="box"> <div id="flipbook"></div> </div> </template> <script> import Loading from "@/components/Loading.vue"; import $ from "jquery"; import turn from "@/utils/turnjs4/lib/turn.js"; import * as pdfjs from "pdfjs-dist"; import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"; pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; let loading; export default { components: { Loading }, data() { return { pageCav: [], currentPage: 1, // url_01: "/static/kejihuace.pdf", url_01: "/static/pdf/web/compressed.tracemonkey-pldi-09.pdf", width: "", height: "" }; }, mounted() { this.$nextTick(() => { this.pdfInit(this.url_01); }); }, methods: { async pdfInit(url) { const pdfContainer = document.querySelector("#flipbook"); if (!pdfContainer) { return; } const loadingTask = pdfjs.getDocument({ url: url }); const pdf = await loadingTask.promise; const container = document.querySelector("#flipbook"); this.setLoading(); for (let index = 0; index < pdf.numPages; index++) { const page = await pdf.getPage(index + 1); const viewport = page.getViewport({ scale: 1.2 }); console.log(viewport); const divPage = document.createElement("div"); divPage.classList.add("page"); const divPageContent = document.createElement("div"); divPageContent.classList.add("page-content"); const canvas = document.createElement("canvas"); canvas.width = viewport.width; canvas.height = viewport.height; this.width = viewport.width; this.height = viewport.height; const context = canvas.getContext("2d"); if (!context) { return; } const renderContext = { canvasContext: context, viewport: viewport }; await page.render(renderContext).promise; divPageContent.appendChild(canvas); divPage.appendChild(divPageContent); container.appendChild(divPage); } this.pageCav = document.querySelectorAll("#flipbook .page"); this.onTurn(); }, onTurn() { $("#flipbook").turn({ autoCenter: true, height: this.height, width: this.width, display: "double", elevation: 50, duration: 500, gradients: true, acceleration: true, page: 1, pages: this.pageCav.length, turnCorners: "bl,br,tl,tr,l,r", when: { turning: async (e, page, view) => { console.log(e, page, view); }, turned: (e, page) => { console.log(e, page, this.pageCav.length); this.currentPage = page; this.closeLoading(); } } }); }, setLoading() { loading = this.$loading({ lock: true, text: "Loading", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)" }); }, closeLoading() { loading.close(); } } }; </script> <style scoped> .box { /* width: 1190px; */ box-shadow: 0 4px 10px #666; margin: 0 auto; overflow: hidden; background-color: #ccc; display: flex; padding: 50px 0; justify-content: center; align-items: center; } #flipbook { -webkit-transition: margin-left 0.2s; -moz-transition: margin-left 0.2s; -ms-transition: margin-left 0.2s; -o-transition: margin-left 0.2s; transition: margin-left 0.2s; } </style>
I don't know what the problem is This is the bug demo video
https://github.com/blasten/turn.js/assets/92298089/bb54f34e-3b53-4999-8816-9db98886d58a
I can not take the company's double-leaf pdf for display, so I took a single-page pdf for display By the way, I'm terrible at it. Forgive me my browser:chrome 123.0.6312.123 my code:
I don't know what the problem is This is the bug demo video
https://github.com/blasten/turn.js/assets/92298089/bb54f34e-3b53-4999-8816-9db98886d58a