pdfjs-dist 4.8.69 在vue3 的引用

PDF.js是一个JavaScript库，用于呈现PDF文档在浏览器中。当在Vue3项目中使用pdfjs-dist 4.8.69版本时，你需要按照以下步骤来引用：

1. 首先，在你的Vue项目中安装pdfjs-dist作为依赖项。你可以通过npm或yarn来进行安装：

   npm install pdfjs-dist@4.8.69 或者
   yarn add pdfjs-dist@4.8.69

2. 然后，在你的主入口文件`main.js`或`app.vue`等组件中，导入并注册pdfjs：

   import * as PDFJS from 'pdfjs-dist';
   // 如果你想按需加载，可以只导入需要的部分
   // import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer';

   Vue.prototype.$PDFJS = PDFJS;

这样，Vue实例就会有一个全局属性`$PDFJS`指向PDF.js库。

3. 当你需要在某个组件中使用PDF.js时，可以直接从Vue实例上调用：

   <template>
     <button @click="loadPDF">Load PDF</button>
     <div id="pdf-container" ref="pdfContainer"></div>
   </template>

   <script>
   export default {
     methods: {
       loadPDF() {
         const container = this.$refs.pdfContainer;
         const url = 'path_to_your_pdf'; // 替换为你PDF文件的实际URL
         PDFJS.getDocument(url).promise.then(pdf => {
           pdf.getPage(1).then(page => {
             const scale = 1; // 可自定义缩放比例
             const viewport = page.getViewport({ scale });
             container.width = viewport.width;
             container.height = viewport.height;

             const renderContext = {
               canvasContext: document.createElement('canvas').getContext('2d'),
               viewport,
             };

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