Vue3使用pdfjs-dist实现PDF文件浏览器预览功能

npm install pdfjs-dist
# 或
yarn add pdfjs-dist

<template>
  <div>
    <div ref="pdfContainer" style="width: 100%; height: 600px;"></div>
    <button @click="loadPdf">加载PDF</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/web/pdf_viewer.css'; // 引入样式

export default {
  setup() {
    const pdfContainer = ref(null);
    const pdfUrl = ref(''); // 替换为您的PDF文件URL或路径

    // 加载PDF函数
    const loadPdf = async () => {
      try {
        // 初始化PDF.js
        const pdf = await pdfjsLib.getDocument(pdfUrl.value).promise;
        const page = await pdf.getPage(1); // 加载第一页
        
        // 设置渲染选项
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        
        // 渲染到canvas
        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise;
        
        // 添加到DOM
        pdfContainer.value.innerHTML = '';
        pdfContainer.value.appendChild(canvas);
      } catch (error) {
        console.error('加载PDF失败:', error);
      }
    };

    onMounted(() => {
      // 组件挂载后自动加载或手动触发
      // loadPdf();
    });

    return {
      pdfContainer,
      loadPdf
    };
  }
};
</script>

<template>
  <div>
    <h1>PDF预览器</h1>
    <PdfViewer />
  </div>
</template>

<script>
import PdfViewer from './components/PdfViewer.vue';

export default {
  components: {
    PdfViewer
  }
};
</script>