pdf.js支持vue3

PDF.js是一个开源库，用于在浏览器中呈现PDF文档，它主要是基于JavaScript实现的。Vue.js是一种流行的前端框架，用于构建用户界面。两者可以结合使用，让PDF.js在Vue 3应用中得到展示。

要在Vue 3项目中集成PDF.js，你可以按照以下步骤操作：

1. 安装依赖：首先，在你的Vue 3项目中安装`pdfjs-dist`库，这是PDF.js的主体部分，可以使用npm或yarn命令：

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

2. 导入并注册组件：创建一个Vue组件，例如`PdfViewer.vue`，然后导入PDF.js模块，并编写处理PDF内容显示的逻辑：

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

   <script>
   import { PDFJS } from 'pdfjs-dist';

   export default {
     mounted() {
       PDFJS.getDocument('path_to_your_pdf').promise.then((doc) => {
         this.renderDocument(doc);
       });
     },
     methods: {
       renderDocument(doc) {
         doc.pages.forEach((page) => {
           const scale = 1; // 设置缩放比例
           const viewport = page.getViewport(scale);

           // 创建一个canvas元素
           const container = this.$refs.container;
           const canvas = document.createElement('canvas');
           canvas.width = viewport.width;
           canvas.height = viewport.height;
           container.appendChild(canvas);

           // 使用PDF.js渲染页面到canvas
           const context = canvas.getContext('2d');
           const renderingContext = {
             canvasContext: context,
             viewport: viewport,
             intent: PDFPageRenderIntent.PAGE,
           };
           const renderTask = doc.render({
             canvasContext: renderingContext.canvasContext,
             viewport: renderingContext.viewport,
             renderInteractiveForms: true,
           });

           renderTask.promise.then(() => {
             // 渲染完成后处理...
           });
         });
       },
     },
   };
   </script>

3. 将组件添加到Vue实例中：在App.vue或其他适当的地方引用这个`PdfViewer`组件。