PdfPreviewPage.vue
2.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!--
* @Date: 2025-10-22 10:45:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-22 10:54:10
* @FilePath: /mlaj/src/views/study/PdfPreviewPage.vue
* @Description: 文件描述
-->
<template>
<div class="pdf-preview-page">
<PdfViewer :show="true" :url="pdfUrl" :title="pdfTitle" @onClose="handleClose" />
</div>
</template>
<script setup>
import { computed, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PdfViewer from '@/components/ui/PdfViewer.vue'
const route = useRoute()
const router = useRouter()
// 从路由查询参数获取PDF的URL和标题
const pdfUrl = computed(() => {
const url = route.query.url || ''
// 兼容可能存在的编码
return typeof url === 'string' ? decodeURIComponent(url) : ''
})
const pdfTitle = computed(() => {
const title = route.query.title || ''
return typeof title === 'string' ? decodeURIComponent(title) : ''
})
/**
* 处理关闭事件
*/
const handleClose = () => {
// 清除刷新标记
sessionStorage.removeItem('pdf-preview-refreshed')
const returnId = route.query.returnId
const openMaterials = route.query.openMaterials
if (returnId) {
// 使用 replace 跳回学习详情页并打开学习资料弹框,避免历史中保留PDF预览
router.replace({ path: `/studyDetail/${returnId}`, query: { openMaterials: openMaterials || '1' } })
} else {
// 无返回ID时,使用 replace 导航到学习页,避免返回进入PDF预览
router.replace({ path: '/study' })
}
}
/**
* 组件挂载时主动刷新页面
*/
onMounted(() => {
// 检查是否已经刷新过,避免无限刷新
const hasRefreshed = sessionStorage.getItem('pdf-preview-refreshed')
if (!hasRefreshed) {
sessionStorage.setItem('pdf-preview-refreshed', 'true')
window.location.reload()
}
})
/**
* 组件卸载前清除刷新标记
*/
onBeforeUnmount(() => {
// 清除刷新标记,确保离开页面时清理状态
sessionStorage.removeItem('pdf-preview-refreshed')
})
</script>
<style scoped>
.pdf-preview-page {
height: 100vh;
width: 100vw;
background: #fff;
display: flex;
flex-direction: column;
}
</style>