|
|
@@ -0,0 +1,289 @@
|
|
|
+<template>
|
|
|
+ <el-button
|
|
|
+ v-if="contentType === 'button'"
|
|
|
+ :type="btnType"
|
|
|
+ :link="isLink"
|
|
|
+ @click="showPdf"
|
|
|
+ >
|
|
|
+ {{ btnText }}
|
|
|
+ </el-button>
|
|
|
+ <div
|
|
|
+ v-if="needToShowPdf"
|
|
|
+ v-show="visible"
|
|
|
+ class="midPopUp"
|
|
|
+ @click="visible = false"
|
|
|
+ style="z-index: 999999999999 !important"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="popView"
|
|
|
+ style="
|
|
|
+ width: 90vw;
|
|
|
+ height: 90vh;
|
|
|
+ background-color: black;
|
|
|
+
|
|
|
+ overflow: hidden;
|
|
|
+ "
|
|
|
+ @click.stop
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-show="loading"
|
|
|
+ style="
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 90vh;
|
|
|
+ color: white;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 加载中..
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-left: 20px;
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>共{{ pageLength }}页</div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="font-size: 20px; margin-right: 20px"
|
|
|
+ @click="visible = false"
|
|
|
+ link
|
|
|
+ >关闭</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-scrollbar
|
|
|
+ style="height: calc(90vh - 40px); width: 90vw; padding: 0px 20px"
|
|
|
+ >
|
|
|
+ <VuePdfEmbed
|
|
|
+ v-if="showVisible"
|
|
|
+ :source="{
|
|
|
+ url: pdfSource,
|
|
|
+ cMapUrl: '/cmaps/',
|
|
|
+ cMapPacked: true,
|
|
|
+ }"
|
|
|
+ @loaded="renderedShow"
|
|
|
+ @rendered="
|
|
|
+ showVisible = false;
|
|
|
+ showELStatus = true;
|
|
|
+ "
|
|
|
+ :page="1"
|
|
|
+ annotation-layer
|
|
|
+ text-layer
|
|
|
+ />
|
|
|
+
|
|
|
+ <template v-for="(item, index) in pageLength" :key="index">
|
|
|
+ <el-scrollbar v-if="showELStatus">
|
|
|
+ <VuePdfEmbed
|
|
|
+ v-if="showELStatus"
|
|
|
+ :source="{
|
|
|
+ url: pdfSource,
|
|
|
+ cMapUrl: '/cmaps/',
|
|
|
+ cMapPacked: true,
|
|
|
+ }"
|
|
|
+ :page="index + 1"
|
|
|
+ @rendered="index + 1 === pageLength ? rendered() : null"
|
|
|
+ annotation-layer
|
|
|
+ text-layer
|
|
|
+ />
|
|
|
+ </el-scrollbar>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 20px 0;
|
|
|
+ color: white;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 第 {{ index + 1 }} 页，共 {{ pageLength }} 页
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import VuePdfEmbed from "vue-pdf-embed";
|
|
|
+// essential styles
|
|
|
+import "vue-pdf-embed/dist/style/index.css";
|
|
|
+
|
|
|
+// optional styles
|
|
|
+import "vue-pdf-embed/dist/style/annotationLayer.css";
|
|
|
+import "vue-pdf-embed/dist/style/textLayer.css";
|
|
|
+import { render } from "nprogress";
|
|
|
+
|
|
|
+// either URL, Base64, binary, or document proxy
|
|
|
+const props = defineProps({
|
|
|
+ pdfSource: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ pageNumber: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ needToShowPdf: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ contentType: {
|
|
|
+ type: String as PropType<"button" | "pdf">,
|
|
|
+ default: "pdf",
|
|
|
+ },
|
|
|
+ btnText: {
|
|
|
+ type: String,
|
|
|
+ default: "预览",
|
|
|
+ },
|
|
|
+ btnType: {
|
|
|
+ type: String,
|
|
|
+ default: "primary",
|
|
|
+ },
|
|
|
+ isLink: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ showPdfNumber: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+});
|
|
|
+const loading = ref(true);
|
|
|
+const pageLength = ref(0);
|
|
|
+const pageStatus = ref(true);
|
|
|
+const renderedShow = (pdf: any) => {
|
|
|
+ pageLength.value = pdf.numPages;
|
|
|
+ pageStatus.value = false;
|
|
|
+ console.log(pageLength.value);
|
|
|
+};
|
|
|
+const visible = ref(false);
|
|
|
+const showVisible = ref(false);
|
|
|
+const showPdf = () => {
|
|
|
+ visible.value = true;
|
|
|
+ showVisible.value = true;
|
|
|
+};
|
|
|
+const showELStatus = ref(false);
|
|
|
+const rendered = () => {
|
|
|
+ loading.value = false;
|
|
|
+ // const clickableElementsA = document.querySelectorAll(".vue-pdf-embed div");
|
|
|
+ // const clickableElements = document.querySelectorAll(
|
|
|
+ // ".vue-pdf-embed .vue-pdf-embed__page"
|
|
|
+ // );
|
|
|
+ // clickableElementsA.forEach((element) => {
|
|
|
+ // element.style.display = "flex";
|
|
|
+ // element.style.alignItems = "center";
|
|
|
+ // element.style.justifyContent = "center";
|
|
|
+ // });
|
|
|
+ // clickableElements.forEach((element, index) => {
|
|
|
+ // let rotationAngle = 0;
|
|
|
+ // element.addEventListener("click", () => {
|
|
|
+ // const currentWidth = element.offsetWidth;
|
|
|
+ // const currentHeight = element.offsetHeight;
|
|
|
+ // const parent = element.parentNode;
|
|
|
+ // let distance = 0;
|
|
|
+ // if (currentHeight > currentWidth) {
|
|
|
+ // distance = currentHeight - currentWidth;
|
|
|
+ // } else {
|
|
|
+ // element.style.width = `${currentHeight}px`;
|
|
|
+ // element.style.height = `${currentWidth}px`;
|
|
|
+ // }
|
|
|
+ // rotationAngle = (rotationAngle + 90) % 360;
|
|
|
+ // if (rotationAngle == 0) {
|
|
|
+ // if (distance > 0) {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ // } else {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // if (rotationAngle == 90) {
|
|
|
+ // if (distance > 0) {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg)`;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
|
|
|
+ // } else {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg)`;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // if (rotationAngle === 180) {
|
|
|
+ // if (distance > 0) {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ // } else {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // if (rotationAngle === 270) {
|
|
|
+ // if (distance > 0) {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
|
|
|
+ // } else {
|
|
|
+ // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // parent.style.width = `${currentWidth}px`;
|
|
|
+ // parent.style.height = `${currentHeight}px`;
|
|
|
+ // });
|
|
|
+ // element.addEventListener("wheel", function (event) {
|
|
|
+ // const currentWidth = element.offsetWidth;
|
|
|
+ // const currentHeight = element.offsetHeight;
|
|
|
+ // const parent = element.parentNode;
|
|
|
+ // if (event.ctrlKey) {
|
|
|
+ // event.preventDefault();
|
|
|
+
|
|
|
+ // // 获取当前的transform值并解析
|
|
|
+ // const transform = getComputedStyle(element).transform;
|
|
|
+ // let scale = 1,
|
|
|
+ // rotate = 0;
|
|
|
+
|
|
|
+ // if (transform && transform !== "none") {
|
|
|
+ // const transformMatrix = new WebKitCSSMatrix(transform);
|
|
|
+ // scale = Math.sqrt(
|
|
|
+ // Math.pow(transformMatrix.a, 2) + Math.pow(transformMatrix.b, 2)
|
|
|
+ // );
|
|
|
+ // rotate =
|
|
|
+ // Math.atan2(transformMatrix.b, transformMatrix.a) * (180 / Math.PI);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 根据滚轮方向调整缩放级别
|
|
|
+ // if (event.deltaY < 0) {
|
|
|
+ // // 向上滚动，放大
|
|
|
+ // scale += 0.1;
|
|
|
+ // } else {
|
|
|
+ // // 向下滚动，缩小
|
|
|
+ // scale -= 0.1;
|
|
|
+ // }
|
|
|
+ // // 确保缩放级别不会变成负数或过小
|
|
|
+ // scale = Math.max(0.1, Math.min(scale, 5));
|
|
|
+
|
|
|
+ // // 应用新的缩放级别和原有的旋转角度
|
|
|
+ // element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
|
|
|
+ // //同步放大展示盒子
|
|
|
+ // parent.style.width = `${currentWidth * scale}px`;
|
|
|
+ // parent.style.height = `${currentHeight * scale}px`;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.a {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+</style>
|
