vue2 pdfjs使用方式

Vue2中使用pdf.js的方式主要涉及以下几个步骤：

1. 安装pdf.js：
首先，你需要在你的项目中安装pdf.js。可以通过npm来安装：

   npm install pdfjs-dist

如果你想使用在线版本的pdf.js，可以通过添加script标签的方式引入。

2. 引入pdf.js：
在你的Vue组件中引入pdf.js的Worker和PDF文档解析器。

   import { getDocument } from 'pdfjs-dist/legacy/build/pdf';

3. 创建Vue组件：
在Vue组件中，你可能需要一些数据属性来存储PDF文件以及页面渲染状态，以及一些方法来处理PDF文件的加载和渲染。

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

   <script>
   export default {
     data() {
       return {
         pdf: null,
         pdfCanvas: null,
       };
     },
     methods: {
       loadPDF(url) {
         getDocument(url).promise.then((pdf) => {
           this.pdf = pdf;
           this.renderPDF(1);
         });
       },
       renderPDF(pageNumber) {
         const page = this.pdf.getPage(pageNumber);
         const viewport = page.getViewport({ scale: 1.5 });
         const canvas = this.$refs.pdfCanvas;
         const context = canvas.getContext('2d');
         canvas.height = viewport.height;
         canvas.width = viewport.width;
         
         const renderContext = {
           canvasContext: context,
           viewport: viewport,
         };
         page.render(renderContext).promise.then(() => {
           // Page rendering is now done.
         });
       }
     },
     mounted() {
       const pdfUrl = 'path/to/your/pdf/file.pdf';
       this.loadPDF(pdfUrl);
     }
   };
   </script>

4. 使用组件：
在模板中使用你的Vue组件，并确保有合适的引用指向pdf.js。

以上代码只是一个基本的示例，实际使用时可能需要考虑更多的细节，比如PDF页面的翻页功能、缩放控制、导航等等。你需要根据实际需要扩展这个基础组件。