saber/src/views/util/PdfPreview.vue

<template>
  <div class="pdf-viewer">
    <div class="pdf-content">
      <canvas ref="pdfCanvas"></canvas>
    </div>
    <div class="pagination">
      <button @click="prevPage">上一页</button>
      <span>{{ pageNum }} / {{ pageCount }}</span>
      <button @click="nextPage">下一页</button>
      <!-- 添加返回按钮 -->
      <button @click="goBack">返回</button>
    </div>
  </div>
</template>

<script>
window.pdfjsLib = pdfjsLib
pdfjsLib.GlobalWorkerOptions.workerSrc = 
  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'

export default {
  data() {
    return {
      dialogVisible: false,
      pdfDoc: null,
      pageNum: 1,
      pageCount: 0,
      pdfUrl: ''
    }
  },
   watch: {
    // 观察 pdfUrl 的变化
    pdfUrl(newVal) {
      console.log(newVal,'newVal');
 
      if (newVal !== this.pdfUrl) {
         this.dialogVisible = false
        this.openPdf();
      }
    }
  },
  mounted() {
   
       this.pdfUrl = this.$route.query.url || ''; // 假设pdfUrl是通过查询参数传递的
    console.log( this.pdfUrl,' this.pdfUrl1111111');
     this.openPdf()
  },
  methods: {
    goBack(){
        this.dialogVisible = false
      this.$router.go(-1)
    },
    openPdf() {
      this.dialogVisible = true
      this.loadPdf()
    },
    closeDialog() {
      this.pdfDoc = null
      this.pageNum = 1
    },
    async loadPdf() {
      try {
        // 加载 PDF 文档
        const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
        this.pdfDoc = await loadingTask.promise
        this.pageCount = this.pdfDoc.numPages
        this.renderPage(this.pageNum)
      } catch (error) {
        this.$message.error('加载 PDF 失败: ' + error.message)
      }
    },
    async renderPage(num) {
      try {
        const page = await this.pdfDoc.getPage(num)
        const canvas = this.$refs.pdfCanvas
        const ctx = canvas.getContext('2d')
        const viewport = page.getViewport({ scale:1 })

        canvas.height = viewport.height
        canvas.width = viewport.width

        await page.render({
          canvasContext: ctx,
          viewport: viewport
        }).promise
      } catch (error) {
        this.$message.error('渲染 PDF 页面失败: ' + error.message)
      }
    },
    prevPage() {
      if (this.pageNum <= 1) return
      this.pageNum--
      this.renderPage(this.pageNum)
    },
    nextPage() {
      if (this.pageNum >= this.pageCount) return
      this.pageNum++
      this.renderPage(this.pageNum)
    }
  }
}
</script>


<style scoped>
.pdf-viewer {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 或者固定高度如 800px */
  text-align: center;

}

.pdf-content {
  flex: 1;
  overflow: auto; /* 内容超出时显示滚动条 */
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 10px;
  background: #f5f5f5;
  position: sticky;
  bottom: 0;
}
</style>