vue3中使用pdf.js、实现移动端、PC端的PDF预览、支持绝大部分情况

<template>
  <div class="pdf-container">
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
const pdfCanvas = ref(null);
const pdfPath = 'path/to/your/pdf/file.pdf';
 
onMounted(() => {
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.357/pdf.worker.js';
  const loadingTask = pdfjsLib.getDocument(pdfPath);
 
  loadingTask.promise.then(function(pdf) {
    console.log('PDF loaded');
    // Fetch the first page of the PDF
    pdf.getPage(1).then(function(page) {
      console.log('Page loaded');
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = pdfCanvas.value;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      // Render PDF page into canvas context
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      const renderTask = page.render(renderContext);
      renderTask.promise.then(function() {
        console.log('Page rendered');
      });
    });
  }).catch(function(error) {
    // Handle errors here
    console.error('Error: ', error);
  });
});
</script>
 
<style>
.pdf-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
canvas {
  width: 100%;
  height: auto;
}
</style>

这段代码使用Vue 3和PDF.js实现了PDF文件的加载和渲染。它在移动端和PC端都有很好的表现，并且支持大多数的PDF文件。代码中使用了pdfjs-dist库，并且通过onMounted生命周期钩子进行了初始化设置，确保了在组件挂载时PDF文件已经加载并渲染到canvas上。