pdf在线预览

    "pdfjs-dist": "^2.16.105",  
<template>
  <div class="pdf-wrap">
    <div class="top">
      <el-button type="text" @click="clickPre">上一页 </el-button
      ><span class="ml8 mr8">第{{ pageNo }} / {{ pdfPageNumber }}页</span
      ><el-button type="text" @click="clickNext"> 下一页</el-button>
      <el-button type="text" @click="zoomIn">放大页面</el-button>
      <el-button type="text" @click="zoomOut">缩小页面</el-button>
    </div>
      <div class="canvas-container" ref="pdfContainer"></div>
    <div class="down">
      <el-button type="text" @click="clickPre">上一页</el-button
      ><span class="ml8 mr8">第{{ pageNo }} / {{ pdfPageNumber }}页</span
      ><el-button type="text" @click="clickNext">下一页</el-button>

      <el-button type="text" @click="zoomIn">放大页面</el-button>
      <el-button type="text" @click="zoomOut">缩小页面</el-button>
    </div>
  </div>
</template>
<script>
const pdfJS = require('pdfjs-dist')
pdfJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
export default {
  props: {
    src: String
  },
  mounted() {
    this.$nextTick(() => {
      this.loadPDF('/static/pdf/中.pdf', 1)
    })
  },
  data() {
    return {
      pageNo: null,
      pdfPageNumber: null,
      pdfTotalPages: 1,
      renderingPage: false,
      pdfData: null, // PDF的base64
      scale: 1.3,
      pdfUrl: '/static/pdf/中.pdf'
    }
  },
  methods: {
    async loadPDF(pdfUrl, num) {
      this.renderingPage = true
      this.pdfUrl = pdfUrl
      const pdfContainer = this.$refs.pdfContainer
      pdfContainer.innerHTML = ''
      // 异步加载 PDF 文件
      const pdf = await pdfJS.getDocument(pdfUrl).promise
      this.pdfPageNumber = pdf.numPages //总页数
      // 渲染 PDF 页面
      const page = await pdf.getPage(num)
      const viewport = page.getViewport({
        scale: this.scale,
        enableWebGL: true, // 启用 WebGL 渲染（如果支持）
        imageSmoothingEnabled: true
      })

      // 创建 Canvas 元素并添加到容器中
      const canvas = document.createElement('canvas')
      canvas.className = 'pdf-page'
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      pdfContainer.appendChild(canvas)

      // 渲染 PDF 页面到 Canvas 上
      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise

      this.renderingPage = false
      this.pageNo = num //当前页
    },
    // 上一页
    clickPre() {
      if (!this.renderingPage && this.pageNo && this.pageNo > 1) {
        this.loadPDF(this.pdfUrl, this.pageNo - 1)
      }
    },
    // 下一页
    clickNext() {
      if (this.pageNo == this.pdfPageNumber) {
        this.loadPDF(this.pdfUrl, 1)
        return
      }
      if (!this.renderingPage && this.pdfPageNumber && this.pageNo && this.pageNo < this.pdfPageNumber) {
        this.loadPDF(this.pdfUrl, this.pageNo + 1)
      }
    },

    // 缩小页面
    zoomOut() {
      if (this.scale > 0.5) {
        // 限制最小缩放比例
        this.scale -= 0.1 // 减小缩放比例
        this.loadPDF(this.pdfUrl, this.pageNo) // 重新加载 PDF 页面
      }
    },

    // 放大页面
    zoomIn() {
      if (this.scale < 2) {
        // 限制最大缩放比例
        this.scale += 0.1 // 增加缩放比例
        this.loadPDF(this.pdfUrl, this.pageNo) // 重新加载 PDF 页面
      }
    }
  }
}
</script>
<style scoped>
.pdf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 4px solid #ccc;
  overflow: hidden;
}
.top {
  flex: 0 0 auto;
}

.down {
  flex: 0 0 auto;
}
.canvas-container {
   border: 1px dashed #e1e1e1;
  height: 800px;
  overflow: auto;
}
canvas {
  border: 1px dashed black;
  margin-bottom: 10px;
}
.ml8 {
  margin-left: 8px;
}
.mr8 {
  margin-right: 8px;
}
</style>