vue3 使用pdf.js

Vue3中使用PDF.js主要是为了在Web应用中加载、展示和交互PDF文件。PDF.js是一个由Mozilla开源的JavaScript库，它提供了一个完整的HTML5视图，可以在浏览器中离线渲染PDF文档，并支持缩放、页面导航等功能。

要在Vue3项目中引入并使用PDF.js，你可以按照以下步骤操作：

1. **安装依赖**：
在`npm`或`yarn`命令行中运行：

   npm install pdfjs-dist @vue/runtime-dom
   # 或者
   yarn add pdfjs-dist @vue/runtime-dom

2. **创建PDF Viewer组件**：
创建一个新的Vue组件，比如`PdfViewer.vue`，然后导入PDF.js和Vue的DOM运行时模块，并使用`ref`声明一个用于存储PDF数据的变量：

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

   <script setup>
   import { ref } from '@vue/reactivity';
   import * as PDFJS from 'pdfjs-dist';

   const pdfData = ref(null);
   async function loadPDF(pdfUrl) {
     const promise = PDFJS.getDocument(pdfUrl);
     await promise.promise.then((doc) => {
       // ...处理文档内容...
       pdfData.value = doc;
     });
   }
   // ...
   </script>

3. **使用PDF Viewer**：
在需要的地方调用`loadPDF`函数，传入PDF文件的URL，当PDF加载完成时，可以开始设置PDF视图：

   <button @click="loadPDF('your-pdf-url')">Load PDF</button>

   methods: {
     async loadPDF(pdfUrl) {
       try {
         await loadPDF(pdfUrl);
         // 初始化PDF查看器
         const viewer = this.$refs.viewer;
         const pageView = new PDFJS.PageView({ container: viewer });
         const firstPage = pdfData.value.getPage(1); // 获取第一页
         pageView.render({ viewport: firstPage.getViewport() }); // 渲染页面
       } catch (error) {
         console.error(error);
       }
     },
   }