From 87da339bebe4a04d9fed5cab5bd4e550b4c3f257 Mon Sep 17 00:00:00 2001
From: yiming <m13691596795@163.com>
Date: 星期四, 15 八月 2024 17:43:54 +0800
Subject: [PATCH] 体育与健康pdf修改4
---
src/components/pdfview/index.vue | 177 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 106 insertions(+), 71 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index f20fe73..501df42 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,11 +1,8 @@
-<!-- @format -->
-
<template>
- <div class="pdfBox-component">
- <div class="preview" v-if="this.preViewMd5">
- <div id="imageParent" class="imageBox"></div>
- <div class="bottom_tool">
- <!-- <svg
+ <div class="preview" v-if="this.preViewMd5">
+ <div id="imageParent" class="imageBox"></div>
+ <div class="bottom_tool">
+ <!-- <svg
t="1718330411310"
@click="downloadPdf"
class="icon"
@@ -21,20 +18,15 @@
p-id="7122"
></path>
</svg> -->
- </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>
</template>
<script>
-import Viewer from 'viewerjs'
-import 'viewerjs/dist/viewer.css'
-import { getResourcePath } from '@/assets/methods/resources'
+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,
@@ -49,117 +41,160 @@
},
data() {
return {
- currentPageSrc: '',
+ currentPageSrc: "",
currentPage: 1,
totalPage: 1,
viewerCon: null,
- preViewMd5: '',
- loading: false,
- }
+ preViewMd5: "",
+ };
},
watch: {
isClear: {
immediate: true,
handler(val) {
- if (val == true) this.preViewMd5 = ''
+ if (val == true) this.preViewMd5 = "";
},
},
md5: {
immediate: true,
handler(val) {
if (val) {
- this.preViewMd5 = val
- this.currentPage = 1
- this.currentPageSrc = ''
- this.totalPage = 1
- this.viewerCon?.destroy()
+ this.preViewMd5 = val;
+ this.currentPage = 1;
+ this.currentPageSrc = "";
+ this.totalPage = 1;
+ this.viewerCon?.destroy();
}
},
},
},
mounted() {
- this.scrollBottom()
- this.clearDom()
- this.getFileInfo()
+ this.scrollBottom();
+ this.clearDom();
+ this.getFileInfo();
},
methods: {
async downloadPdf() {
- window.open(await getResourcePath(this.preViewMd5))
+
+ window.open(await getResourcePath(this.preViewMd5));
+
+
+
+
+
},
domViewer() {
- let ele = document.getElementById('imageParent')
+ let ele = (this.container ? this.container : document).getElementById(
+ "imageParent"
+ );
this.viewerCon = new Viewer(ele, {
inline: false,
container: this.container
- ? this.container.querySelector('#app')
- : 'body',
+ ? this.container.querySelector("#app")
+ : "body",
navbar: true, // 鏄剧ず瀵艰埅鏍�
toolbar: true, // 鏄剧ず宸ュ叿鏍�
title: true, // 鏄剧ず鏍囬
- })
+ });
},
clearDom() {
- let ele = document.getElementById('imageParent')
- ele.innerHtml = ''
+ let ele = document.getElementById("imageParent");
+ 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'
+ 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()
- }
- ele.appendChild(img)
+ that.viewerCon?.destroy();
+ that.domViewer();
+ };
+ ele.appendChild(img);
},
scrollBottom() {
- var that = this
- var ele = document.getElementById('imageParent')
- ele.addEventListener('scroll', function () {
+ var that = this;
+ var ele = document.getElementById("imageParent");
+ ele.addEventListener("scroll", function () {
// 璁＄畻婊氬姩鏉¤窛绂诲簳閮ㄧ殑浣嶇疆
- const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight
+ const scrollBottom =
+ ele.scrollHeight - ele.scrollTop - ele.clientHeight;
if (scrollBottom <= 10) {
- that.currentPage++
+ that.currentPage++;
if (that.currentPage <= that.totalPage) {
- that.createDom(that.currentPage, ele)
+ that.createDom(that.currentPage, ele);
}
}
- })
+ });
},
getFileInfo() {
// 鑾峰彇鐩綍
- this.loading = true;
this.MG.file
.getPdfInfo({ md5: this.preViewMd5 })
.then((res) => {
- this.totalPage = res.totalPages
- this.createDom(this.currentPage)
- this.loading = false
+ this.totalPage = res.totalPages;
+ this.createDom(this.currentPage);
})
.catch((err) => {
- this.totalPage = 0
- this.createDom(this.currentPage)
- console.error(err)
- this.loading = false
- })
+ this.totalPage = 1;
+ this.createDom(this.currentPage);
+ console.error(err);
+ });
},
getPageImage(page) {
- const ctx = process.env.VUE_APP_API_URL
+ const ctx = process.env.VUE_APP_API_URL;
+ console.log(this.preViewMd5);
+
return (
ctx +
- '/file/GetPdfPageImage' +
- '?md5=' +
+ "/file/GetPdfPageImage" +
+ "?md5=" +
this.preViewMd5 +
- '&index=' +
+ "&index=" +
page +
- '&dpi=200'
- )
+ "&dpi=200"
+ );
},
},
-}
+};
</script>
+<style scoped lang="less">
+.preview {
+ width: 100%;
+ height: 100%;
+
+ .imageBox {
+ height: calc(100% - 30px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #ccc;
+ box-sizing: border-box;
+ }
+
+ .imageBox:hover {
+ cursor: zoom-in !important;
+ }
+
+ .bottom_tool {
+ height: 30px;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ svg {
+ margin-right: 15px;
+ fill: #d1d1d1;
+ }
+
+ svg:hover {
+ fill: #fff;
+ cursor: pointer;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1