pdf预览

src/config/index.json

@@ -1,6 +1,6 @@
 {
     "version": "202304141558",
-    "target": "http://192.168.0.109:8090",
+    "target": "http://39.108.216.210:8090",
     "smsPhone": "",
     "vite": {
         "port": 5175,

src/global/components/hc-pdfs/pdfs.vue

@@ -0,0 +1,64 @@
+<template>
+    <hc-pdf :src="pdfUrl" :download="isDownload" :print="isPrint" />
+</template>
+
+<script setup>
+import { isNullES } from 'js-fast-way'
+import {onMounted, ref, watch} from 'vue'
+import { btnAuth, decode } from '~uti/btn-auth'
+
+const props = defineProps({
+    url: {
+        type: String,
+        default: ''
+    },
+    code: {
+        type: String,
+        default: ''
+    },
+})
+
+defineOptions({
+    name: 'HcPdfs',
+})
+
+//监听
+const queryUrl = ref(props.url)
+const queryCode = ref(props.code)
+watch(() => [props.url, props.code], ([url, code]) => {
+    queryUrl.value = url
+    queryCode.value = code
+    setPdfSrcData()
+})
+
+//渲染完成
+const isDownload = ref(false)
+const isPrint = ref(false)
+onMounted(() => {
+    isDownload.value = btnAuth('archives-pdf-download')
+    isPrint.value = btnAuth('archives-pdf-print')
+    setPdfSrcData()
+})
+
+//设置PDF地址
+const pdfUrl = ref('')
+const setPdfSrcData = () => {
+    const url = queryUrl.value, code = queryCode.value
+    //如果url和code都为空，不做处理
+    if (isNullES(url) && isNullES(code)) {
+        return
+    }
+    //如果url不为空，code为空，以url为准
+    if (!isNullES(url) && isNullES(code)) {
+        pdfUrl.value = url
+        return
+    }
+    //如果url为空，code不为空，以code为准
+    if (isNullES(url) && !isNullES(code)) {
+        pdfUrl.value = decode(code ?? '')
+        return
+    }
+    //两个都有的情况下，以code为准
+    pdfUrl.value = decode(code ?? '')
+}
+</script>

src/global/components/index.js

@@ -5,6 +5,7 @@ import HcReportExperts from './hc-report-experts/index.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
 import HcBorderNeon from './hc-border-neon/index.vue'
 import HcCharts from './echarts/echarts.vue'
+import HcPdfs from './hc-pdfs/pdfs.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -15,4 +16,5 @@ export const setupComponents = (App) => {
     App.component('HcTasksUser', HcTasksUser)
     App.component('HcBorderNeon', HcBorderNeon)
     App.component('HcCharts', HcCharts)
+    App.component('HcPdfs', HcPdfs)
 }

src/views/home/pdf.vue

@@ -1,19 +1,15 @@
 <template>
     <div class="hc-pdf-page-box">
-        <hc-pdf :src="pdfUrl" :download="isDownload" :print="isPrint" />
+        <hc-pdfs :url="pdfUrl" :code="pdfCode"/>
     </div>
 </template>
 
 <script setup>
-import { isNullES } from 'js-fast-way'
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { btnAuth, decode } from '~uti/btn-auth'
 
 //初始变量
 const useRoutes = useRoute()
-const isDownload = ref(btnAuth('archives-pdf-download'))
-const isPrint = ref(btnAuth('archives-pdf-print'))
 
 defineOptions({
     name: 'Pdf',
@@ -21,24 +17,11 @@ defineOptions({
 
 //渲染完成
 const pdfUrl = ref('')
+const pdfCode = ref('')
 onMounted(() => {
     const { url, code } = useRoutes.query
-    //如果url和code都为空，不做处理
-    if (isNullES(url) && isNullES(code)) {
-        return
-    }
-    //如果url不为空，code为空，以url为准
-    if (!isNullES(url) && isNullES(code)) {
-        pdfUrl.value = url
-        return
-    }
-    //如果url为空，code不为空，以code为准
-    if (isNullES(url) && !isNullES(code)) {
-        pdfUrl.value = decode(code ?? '')
-        return
-    }
-    //两个都有的情况下，以code为准
-    pdfUrl.value = decode(code ?? '')
+    pdfUrl.value = url
+    pdfCode.value = code
 })
 </script>
 

src/views/using/query.vue

@@ -278,10 +278,9 @@
         <HcDrawer :show="isCarrySpotChecksDrawer" uis="hc-carry-spot-checks-target" to-id="carry-spot-checks-layout-target" @close="onCarrySpotChecksDrawerClose">
             <div class="hc-carry-spot-checks-pdf">
                 <!-- <HcPdf src="https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf"/> -->
-                <tepmplate v-loading="pdfLoading">
-                    <HcPdf :src="pdfUrl" />
-                </tepmplate>
-
+                <div class="relative h-full w-full" v-loading="pdfLoading">
+                    <hc-pdfs :url="pdfUrl"/>
+                </div>
                 <el-tooltip content="展开/收起 右侧目录" placement="top" :disabled="!isBubble">
                     <div class="hc-csc-pdf-btn" @click="onCarryDataShow">
                         <HcIcon v-show="isCarryDataShow" name="arrow-right-s" />
@@ -464,6 +463,7 @@ import imageViewGui from '~src/assets/view/gui.png'
 import imageViewGui1 from '~src/assets/view/gui1.png'
 import imageViewGui2 from '~src/assets/view/gui2.png'
 import { setTimeString } from '~src/utils/tools'
+import {btnAuth} from "~uti/btn-auth";
 
 //变量
 const useAppState = useAppStore()