wisdomcity-office/src/components/view_file/vendors/pdf/PdfView.vue

<template>
  <div class="home_wrap">
    <div class="pdf_down">
      <div class="pdf_set_left" @click="scaleD">➕</div>
      <div class="pdf_set_middle" @click="scaleX">➖</div>
      <!-- <div class="pdf-pre" @click="prePage">上一页</div> -->
      <!-- <div class="pdf-next" @click="nextPage">下一页</div> -->
    </div>
    <div :style="{ width: pdf_div_width, margin: '0 auto' }">
      <!-- <canvas id="the_canvas"></canvas> -->
      <canvas
        v-for="page in pdf_pages"
        :id="'the_canvas' + page"
        :key="page"
      ></canvas>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import * as PDF from "pdfjs-dist"
import pdfWorkerUrl from "pdfjs-dist/build/pdf.worker.mjs?url"

PDF.GlobalWorkerOptions.workerSrc = pdfWorkerUrl

const props = defineProps({
  data: Array,
})

const pdf_scale = ref(1.0)
const pdf_pages = ref([])
const pdf_div_width = ref("")
const currentPage = ref(1)
let pdfDoc = null

const scaleD = () => {
  let max = 3.0
  if (pdf_scale.value >= max) {
    return
  }
  pdf_scale.value = pdf_scale.value + 0.1
  loadFile()
}

const scaleX = () => {
  let min = 0.5
  if (pdf_scale.value <= min) {
    return
  }
  pdf_scale.value = pdf_scale.value - 0.1
  loadFile()
}

const loadFile = async () => {
  pdfDoc = await PDF.getDocument(props.data).promise
  pdf_pages.value = pdfDoc.numPages
  renderPage(1, true)
}

const renderPage = async (num = 1, isInit = false) => {
  currentPage.value = num
  const page = await pdfDoc.getPage(num)
  
  if (isInit && num === 1) {
    const viewport = page.getViewport({ scale: 1.0 })
    const container = document.querySelector('.preview-wrapper') || document.body
    if (container) {
      const availableWidth = container.clientWidth - 20
      if (availableWidth > 0 && availableWidth < viewport.width) {
        pdf_scale.value = availableWidth / viewport.width
      }
    }
  }

  const canvas = document.getElementById("the_canvas" + num)
  if (!canvas) return
  const ctx = canvas.getContext("2d")
  const dpr = window.devicePixelRatio || 1
  const bsr =
    ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio ||
    1
  const ratio = dpr / bsr
  const viewport = page.getViewport({ scale: pdf_scale.value })
  canvas.width = viewport.width * ratio
  canvas.height = viewport.height * ratio
  canvas.style.width = viewport.width + "px"
  pdf_div_width.value = viewport.width + "px"
  canvas.style.height = viewport.height + "px"
  ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
  const renderContext = {
    canvasContext: ctx,
    viewport: viewport,
  }
  page.render(renderContext)
  if (pdf_pages.value > num) {
    setTimeout(() => {
      return renderPage(num + 1)
    })
  }
}

const nextPage = () => {
  if (pdf_pages.value > currentPage.value) {
    renderPage(currentPage.value + 1)
  }
}

const prePage = () => {
  if (currentPage.value > 1) {
    renderPage(currentPage.value - 1)
  }
}


onMounted(() => {
  loadFile()
})
</script>

<style scoped>
.home_wrap {
  width: 100%;
  height: 100%;
}
.home_wrap .pdf_down {
  position: fixed;
  display: flex;
  z-index: 20;
  right: 26px;
  bottom: 7%;
  cursor: pointer;
}
.home_wrap .pdf-pre {
  position: fixed;
  display: flex;
  z-index: 20;
  right: 160px;
  bottom: 9%;
  cursor: pointer;
}
.home_wrap .pdf-next {
  position: fixed;
  display: flex;
  z-index: 20;
  right: 100px;
  bottom: 9%;
}
.home_wrap .pdf_down .pdf_set_left {
  width: 30px;
  height: 40px;
  color: #408fff;
  font-size: 15px;
  padding-top: 25px;
  text-align: center;
  margin-right: 5px;
  cursor: pointer;
}
.home_wrap .pdf_down .pdf_set_middle {
  width: 30px;
  height: 40px;
  color: #408fff;
  font-size: 15px;
  padding-top: 25px;
  text-align: center;
  margin-right: 5px;
  cursor: pointer;
}
canvas {
  max-width: 100% !important;
  height: auto !important;
}
</style>