manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pdfPreview/pdf.vue

<template>
  <div ref="pdfContainer" class="pdF-container" @scroll="onScroll">
    <div ref="canvasWrapper" class="canvas-wrapper"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as pdfjsLib from 'pdfjs-dist';

const pdfUrl = 'https://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-01/18/75it6phpocqYFV1642488558220118.pdf';
const pdfContainer = ref(null); // PDF容器
const canvasWrapper = ref(null); // canvas容器
let currentPage = 1; // 当前显示的页码
const totalPages = ref(0); // PDF 总页数
const pageHeight = 1000; // 每个页面的高度，用于判断是否需要加载新页面
let loadedPages = new Set(); // 存储已加载的页面编号

onMounted(() => {
  console.log(pdfjsLib.version);
  // 设置 pdf.js 的 workerSrc
  pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js`;

  // 加载 PDF 文件
  pdfjsLib.getDocument(pdfUrl).promise.then((pdf) => {
    console.log('PDF loaded', pdf.numPages);
    totalPages.value = pdf.numPages;

    // 初始化页面加载
    loadPagesInView();
  }).catch((error) => {
    console.error('Error loading PDF:', error);
  });
});

// 滚动事件处理函数
function onScroll() {
  loadPagesInView();
}

// 加载当前可视区域的页面
function loadPagesInView() {
  const container = pdfContainer.value;
  const scrollTop = container.scrollTop; // 获取当前滚动位置
  const containerHeight = container.clientHeight; // 容器的可视区域高度

  // 计算可见区域的开始和结束页码
  const startPage = Math.floor(scrollTop / pageHeight) + 1;
  const endPage = Math.ceil((scrollTop + containerHeight) / pageHeight);

  // 加载可见范围内的页面
  for (let pageNum = startPage; pageNum <= endPage; pageNum++) {
    if (!loadedPages.has(pageNum)) {
      loadedPages.add(pageNum); // 标记该页已经加载
      loadPage(pageNum); // 加载该页
    }
  }
}

// 加载指定页码的PDF页面
async function loadPage(pageNum) {
  const pdf = await pdfjsLib.getDocument(pdfUrl).promise; // 获取 PDF 文档对象
  const page = await pdf.getPage(pageNum);
  
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const scale = 2;  // 设置缩放比例
  const viewport = page.getViewport({ scale });

  // 设置 canvas 大小
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  // 渲染页面
  await page.render({
    canvasContext: context,
    viewport: viewport
  }).promise;
  
  console.log('Page rendered', pageNum);
  
  // 将渲染后的 canvas 添加到容器中
  canvasWrapper.value.appendChild(canvas);
}
</script>

<style scoped>
.pdF-container {
  height: 100%;
  overflow-y: auto; /* 支持垂直滚动 */
}

.canvas-wrapper {
  display: block;
  width: 100%;
}

canvas {
  margin-bottom: 10px;
  border: 1px solid #ccc;
}
</style>