PdfPreviewPage.vue 1.95 KB
<!--
 * @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 } 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()
  }
})
</script>

<style scoped>
.pdf-preview-page {
  height: 100vh;
  width: 100vw;
  background: #fff;
  display: flex;
  flex-direction: column;
}
</style>