PDF预览测试

src/router/modules/base.js

@@ -18,6 +18,12 @@ export default [
         meta: { title: '授权登录' },
         component: () => import('~src/views/user/auth.vue'),
     },
+    {
+        path: '/pdf',
+        name: 'pdf',
+        meta: { title: 'pdf文件预览' },
+        component: () => import('~src/views/home/pdf.vue'),
+    },
     {
         path: '/home',
         name: 'home',
@@ -37,12 +43,6 @@ export default [
                 meta: { title: '系统设置' },
                 component: () => import('~src/views/home/config.vue'),
             },
-            {
-                path: '/pdf',
-                name: 'pdf',
-                meta: { title: 'pdf文件预览' },
-                component: () => import('~src/views/home/pdf.vue'),
-            },
         ],
     },
     {

src/utils/btn-auth.js

@@ -1,5 +1,4 @@
 import pinia from '~src/store/init'
-import router from '~src/router/index'
 import { useAppStore } from '~src/store'
 import { decode, encode } from 'js-base64'
 import { getObjVal, isNullES } from 'js-fast-way'
@@ -23,10 +22,7 @@ export const toPdfPage = (url) => {
         window.$message.warning('pdf地址为空')
         return
     }
-    router.push({
-        name: 'pdf',
-        query: { code: encode(url) },
-    })
+    window.open('/#/pdf?code=' + encode(url))
 }
 
 export { encode, decode }

src/views/home/pdf.vue

@@ -1,12 +1,12 @@
 <template>
-    <hc-new-card>
+    <div class="hc-pdf-page-box">
         <hc-pdf :src="pdfUrl" :download="isDownload" :print="isPrint" />
-    </hc-new-card>
+    </div>
 </template>
 
 <script setup>
 import { isNullES } from 'js-fast-way'
-import { onActivated, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { btnAuth, decode } from '~uti/btn-auth'
 
@@ -15,13 +15,9 @@ const useRoutes = useRoute()
 const isDownload = ref(btnAuth('measure-pdf-download'))
 const isPrint = ref(btnAuth('measure-pdf-print'))
 
-defineOptions({
-    name: 'Pdf',
-})
-
 //渲染完成
 const pdfUrl = ref('')
-onActivated(() => {
+onMounted(() => {
     const { url, code } = useRoutes.query
     //如果url和code都为空，不做处理
     if (isNullES(url) && isNullES(code)) {
@@ -42,6 +38,11 @@ onActivated(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-
+<style scoped>
+.hc-pdf-page-box {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
 </style>