vue-pdf-embed实现PDF文件的预览

# npm
npm install vue-pdf-embed

# yarn
yarn add vue-pdf-embed

# pnpm（推荐）
pnpm add vue-pdf-embed

import VuePdfEmbed from 'vue-pdf-embed'

// 可选样式文件，增强显示效果（如果需要支持文本选择和注释交互）
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'

<script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed'

const pdfUrl = ref('https://cdn.jsdelivr.net/gh/mozilla/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');
</script>

<template>
 <VuePdfEmbed :source="pdfUrl" />
</template>

<script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed'
import { PDFDocumentProxy} from "pdfjs-dist/types/src/display/api";

const pdfUrl = ref('https://cdn.jsdelivr.net/gh/mozilla/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');

// PDF加载完成时回调
const handleDocumentLoaded = (pdfDocument: PDFDocumentProxy) => {
  console.log('PDF文档加载成功，总页数：', pdfDocument.numPages);
  // 这里可以做一些初始化操作，比如更新总页数到状态管理
};

// 加载失败回调
const handleLoadError = (error: Error) => {
  console.error('PDF文档加载失败：', error);
  // 这里可以给用户一个友好的错误提示，比如“文档加载失败，请重试或检查文件”
};

</script>

<template>
 <VuePdfEmbed :source="pdfUrl" @loaded="handleDocumentLoaded" @error="handleLoadError" :width="1400" />
</template>

<script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed'
import { OnProgressParameters } from "pdfjs-dist/types/src/display/api";

const pdfUrl = ref('https://cdn.jsdelivr.net/gh/mozilla/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');

const handleProgress = (progress: OnProgressParameters) => {
  console.log('加载进度：', progress)
};

const handleRenderingFinished = () => {
  console.log('PDF文档渲染完成');
};

// 文档渲染失败回调
const handleRenderingFailed = (error: Error) => {
  console.error('PDF文档渲染失败：', error);
};

</script>

<template>
  <VuePdfEmbed
    ref="vuePdfRef"
    :source="pdfUrl"
    @progress="handleProgress"
    @renderingFailed="handleRenderingFailed"
    @rendered="handleRenderingFinished" />
</template>