From 6fe6aa62545d5021b52c7d1497dceb3a5550ce66 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期二, 07 一月 2025 18:03:21 +0800
Subject: [PATCH] pdf组件
---
src/components/pdfview/index.vue | 286 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 166 insertions(+), 120 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 72522a5..a295a3a 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,19 +1,34 @@
+<!-- @format -->
<template>
- <div ref="imageBox" class="imageBox">
- <img
- id="image"
- ref="image"
- @onload="initFun"
- @ondragstart="dragStart"
- @onwheel="handleScroll"
- :src="currentPageSrc"
- alt=""
- />
- </div>
+ <el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
+ lock-scroll :show-close="false" class="custom-dialog">
+ <div slot="title" class="header_title">
+ <span>{{ pdfTitle }}</span>
+ <span @click="closeDialog"> x </span>
+ </div>
+ <div class="pdfModal" v-if="localDialogVisible">
+ <!-- 鍘熸湁鐨勫唴瀹� -->
+ <div class="pdfBox-component">
+ <div class="preview" v-if="this.preViewMd5">
+ <div id="imageParent" class="imageBox"></div>
+ <div class="bottom_tool">
+ </div>
+ </div>
+ <div class="notBox" v-if="totalPage == 0 && !loading">
+ <el-empty description="鏆傛棤鏁版嵁"></el-empty>
+ </div>
+ <div class="notBox" v-if="loading" v-loading="loading"></div>
+ </div>
+ </div>
+ </el-dialog>
+
</template>
<script>
+import Viewer from 'viewerjs'
+import 'viewerjs/dist/viewer.css'
+import { getResourcePath } from '@/assets/methods/resources'
export default {
- name: "pdf_view",
+ name: 'pdf_view',
props: {
md5: {
type: String,
@@ -21,138 +36,169 @@
title: {
type: String,
},
+ isClear: {
+ type: Boolean,
+ default: false,
+ },
+ pdfTitle: {
+ type: String,
+ }
},
data() {
return {
- currentPageSrc: "",
- fileLoading: false,
- visible: true,
- close: null,
+ localDialogVisible: false,
+ currentPageSrc: '',
currentPage: 1,
totalPage: 1,
- rcViewerOptions: {
- // inline: true
- },
- zoom: 1,
- catalogVisible: false,
- tocData: [],
- generateList: [],
- expandedKeys: [],
- searchValue: "",
- autoExpandParent: true,
- drawerSize: "default",
- };
+ viewerCon: null,
+ preViewMd5: '',
+ loading: false,
+ }
},
watch: {
- md5: {
- handler(newVal, oldVal) {
- if (newVal) {
- this.getFileInfo();
- }
- },
- },
- },
- created() {
- this.getFileInfo();
- },
- mounted(){
- // this.initFun()
+ // md5: {
+ // immediate: true,
+ // handler(val) {
+ // if (val) {
+ // // this.preViewMd5 = val
+ // this.currentPage = 1
+ // this.currentPageSrc = ''
+ // this.totalPage = 1
+ // this.viewerCon?.destroy()
+ // }
+ // },
+ // },
+ // dialogVisibleProp(newVal) {
+ // this.localDialogVisible = newVal;
+ // if (newVal) {
+ // this.currentPage = 1;
+ // this.loading = true;
+ // this.clearDom();
+ // this.getFileInfo();
+ // this.$nextTick(() => {
+ // this.scrollBottom()
+ // });
+ // } else {
+ // this.viewerCon?.destroy();
+ // }
+ // },
},
methods: {
- initFun() {
- // 鍒濆鍖栨嫋鎷�
- let image = this.$refs.image;
- console.log(this,8989);
- if (image) {
- let imageBox = this.$refs.imageBox;
- let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
- image.style.left = 0 + "px";
- image.style.top = 0 + "px";
- let canMove = false;
- let offsetX, offsetY, oldLeft, oldTop;
- image.onmousedown = function (e) {
- canMove = true;
- offsetX = e.x;
- offsetY = e.y;
- oldLeft = parseFloat(image.style.left.split("px")[0]);
- oldTop = parseFloat(image.style.top.split("px")[0]);
- };
- imageBox.onmousemove = function (e) {
- if (canMove == true) {
- let left = e.clientX - offsetX;
- let top = e.clientY - offsetY;
- image.style.left = oldLeft + left + "px";
- image.style.top = oldTop + top + "px";
- }
- };
- image.onmouseup = function () {
- canMove = false;
- };
- this.fileLoading = false;
- }
+ hadleOpenDialog() {
+ this.preViewMd5 = this.md5
+ this.currentPage = 1
+ this.currentPageSrc = ''
+ this.totalPage = 1
+ this.viewerCon?.destroy()
+ this.loading = true;
+ this.clearDom();
+ this.getFileInfo();
+ this.$nextTick(() => {
+ this.scrollBottom()
+ });
},
- dragStart(e) {
- console.log(e,'dragStart')
- if (e && e.preventDefault) {
- e.preventDefault();
- } else {
- window.event.returnValue = false;
+ closeDialog() {
+ this.localDialogVisible = false
+ },
+ openDialog() {
+ this.localDialogVisible = true
+ },
+ async downloadPdf() {
+ window.open(await getResourcePath(this.preViewMd5))
+ },
+ domViewer() {
+ // let ele = (this.container ? this.container : document).getElementById(
+ // 'imageParent'
+ // )
+ let ele = document.getElementById('imageParent')
+ if (ele) {
+ this.viewerCon = new Viewer(ele, {
+ inline: false,
+ container: this.container
+ ? this.container.querySelector('#app')
+ : 'body',
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true, // 鏄剧ず鏍囬
+ })
}
},
- handleScroll(e) {
- console.log(e,'handleScroll')
- if (e.nativeEvent.deltaY <= 0) {
- if (this.zoom < 3) {
- let newZoom = this.zoom + 0.1;
- this.zoom = newZoom;
- this.$refs.image.style.height = newZoom * 100 + "%";
- }
- } else {
- if (this.zoom > 0.5) {
- let newZoom = this.zoom - 0.1;
- this.zoom = newZoom;
- this.$refs.image.style.height = newZoom * 100 + "%";
- }
+ clearDom() {
+ let ele = document.getElementById('imageParent')
+ if (ele) {
+ ele.innerHTML = ''
+ }
+ },
+ createDom(page) {
+ var that = this
+ let ele = document.getElementById('imageParent')
+ const img = document.createElement('img')
+ img.src = this.getPageImage(page)
+ img.alt = ''
+ img.style.maxWidth = '90%'
+ img.style.padding = '30px 5%'
+ img.className = 'imgHover'
+ img.onclick = () => {
+ that.viewerCon?.destroy()
+ that.domViewer()
+ }
+ if (ele) {
+ ele.appendChild(img)
+ }
+ },
+ scrollBottom() {
+ var that = this
+ var ele = document.getElementById('imageParent')
+ if (ele) {
+ ele.addEventListener('scroll', function () {
+ // 璁＄畻婊氬姩鏉¤窛绂诲簳閮ㄧ殑浣嶇疆
+ const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight
+ if (scrollBottom <= 10) {
+ that.currentPage++
+ if (that.currentPage <= that.totalPage) {
+ that.createDom(that.currentPage, ele)
+ }
+ }
+ });
}
},
getFileInfo() {
// 鑾峰彇鐩綍
+ this.loading = true
this.MG.file
- .getPdfInfo({ md5: this.md5 })
+ .getPdfInfo({ md5: this.preViewMd5 })
.then((res) => {
- this.totalPage = res.totalPages;
- this.getPageImage(this.currentPage);
+ try {
+ if (typeof res === 'string' && res !== null) {
+ this.totalPage = JSON.parse(res).totalPages
+ } else if (typeof res === 'object' && res !== null) {
+ this.totalPage = res.totalPages
+ }
+ } catch (error) {
+ console.log(error, 'pdf杩斿洖鍊肩被鍨嬮敊璇�');
+ }
+ this.createDom(this.currentPage)
+ this.loading = false
})
.catch((err) => {
- console.error(err);
- });
+ this.totalPage = 0
+ this.createDom(this.currentPage)
+ console.error(err)
+ this.loading = false
+ })
},
getPageImage(page) {
- const ctx = process.env.VUE_APP_API_URL;
- this.fileLoading = true;
- this.currentPageSrc =
+ const ctx = process.env.VUE_APP_API_URL
+ return (
ctx +
- "/file/GetPdfPageImage" +
- "?md5=" +
- this.md5 +
- "&index=" +
+ '/file/GetPdfPageImage' +
+ '?md5=' +
+ this.preViewMd5 +
+ '&index=' +
page +
- "&dpi=150";
+ '&dpi=200'
+ )
},
},
-};
-</script>
-<style scoped lang="less">
-.imageBox {
- width: 100%;
- height: 300px;
- overflow: auto;
- position: relative;
- img {
- position: absolute;
- width: auto;
- height: 100%;
- transition: transform 0.5s, width 0.3s, height 0.3s;
- }
}
-</style>
+</script>
--
Gitblit v1.9.1