vue2中使用pdf.js

Vue 2中引入PDF.js是为了实现浏览器内查看、交互PDF文档的功能。PDF.js是一个开源库，它允许你在Web浏览器中渲染和交互PDF文件，而无需依赖Adobe Reader等外部插件。

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

1. **安装依赖**:
使用npm或yarn添加pdfjs-dist（包含JavaScript和CSS资源）作为项目依赖：

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

2. **引入库**:
在Vue组件中，你需要导入pdf.js模块和相应的加载函数，通常会在`mounted`生命周期钩子中初始化：

   import * as PDFJS from 'pdfjs-dist';
   export default {
     mounted() {
       this.loadPdf();
     },
     methods: {
       loadPdf(url) {
         PDFJS.getDocument(url).promise.then((doc) => {
           // 更多处理代码...
         });
       }
     }
   }

3. **处理PDF文档**:
`PDFJS.getDocument(url)`返回一个Promise，当文档加载完成后，你可以遍历页面、获取元数据或显示页面内容。例如，显示第一个页面：

   async function displayPage(num) {
     const page = await doc.getPage(num);
     const scale = 1; // 可调整缩放比例
     const viewport = page.getViewport(scale);
     const canvas = document.createElement('canvas');
     canvas.width = viewport.width;
     canvas.height = viewport.height;
     const ctx = canvas.getContext('2d');

     const renderContext = {
       canvasContext: ctx,
       viewport: viewport,
       renderTextLayer: () => {}, // 如果需要文本层
     };

     await page.render(renderContext);
     // 将canvas插入DOM或使用其他方式显示
   }

4. **展示PDF**:
在模板中创建一个按钮或其他触发事件，当点击时调用`loadPdf`并传递PDF URL，然后根据需求调用`displayPage`。