vue3预览pdf文件,请给详细示例

在Vue 3中预览PDF文件，你可以使用一些现成的库，比如`pdfjs-dist`。以下是一个使用`pdfjs-dist`在Vue 3项目中预览PDF文件的详细示例：

1. 首先，你需要安装`pdfjs-dist`库：

npm install pdfjs-dist

2. 创建一个Vue组件`PdfViewer.vue`，并在其中使用`pdfjs-dist`来渲染PDF：

<template>
  <div>
    <canvas ref="pdfCanvas" style="width: 100%; height: 100vh;"></canvas>
  </div>
</template>

<script>
import { ref } from 'vue';
import { getDocument } from 'pdfjs-dist/legacy/build/pdf';

export default {
  name: 'PdfViewer',
  setup() {
    const pdfCanvas = ref(null);

    const loadAndRenderPdf = async (url) => {
      const pdf = await getDocument(url).promise;
      const numPages = pdf._pdfInfo.numPages;
      for (let i = 1; i <= numPages; i++) {
        const page = await pdf.getPage(i);
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = pdfCanvas.value;
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport: viewport,
        };
        await page.render(renderContext).promise;
      }
    };

    return {
      pdfCanvas,
      loadAndRenderPdf,
    };
  },
};
</script>

<style>
/* 根据需要添加样式 */
</style>

3. 在父组件中使用`PdfViewer`组件，并传递PDF文件的URL：

<template>
  <div>
    <PdfViewer :pdfUrl="'path/to/your/pdf/file.pdf'" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    PdfViewer,
  },
};
</script>

确保替换`path/to/your/pdf/file.pdf`为你的PDF文件路径。