uniapp （h5）使用pdf.js

在uniapp中使用pdf.js来展示PDF文件，你需要按照以下步骤操作：

1. 安装pdf.js库。

   你可以通过npm安装pdf.js依赖：

   
   
   
   npm install pdfjs-dist

2. 在uniapp项目中引入pdf.js。

   在main.js或需要使用PDF的页面中引入pdf.js和设置PDF.js的worker文件路径。

   
   
   
   import pdfjsLib from 'pdfjs-dist/build/pdf';
    
   pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js'; // 修改为worker文件实际路径

3. 使用PDF.js加载并渲染PDF。

   在<template>中添加一个用于显示PDF的canvas元素，然后在<script>中编写加载和渲染的逻辑。

   
   
   
   <template>
     <view>
       <canvas canvas-id="pdf-canvas"></canvas>
     </view>
   </template>
    
   <script>
   export default {
     data() {
       return {
         pdfDoc: null,
         pageNum: 1,
         pageRendering: false,
         canvas: null,
         ctx: null
       };
     },
     mounted() {
       this.loadPDF('path/to/your/pdf/file.pdf');
     },
     methods: {
       loadPDF(url) {
         const loadingTask = pdfjsLib.getDocument(url);
         loadingTask.promise.then(pdfDoc => {
           this.pdfDoc = pdfDoc;
           this.renderPage(this.pageNum);
         }).catch(error => {
           console.error('Error loading PDF: ', error);
         });
       },
       renderPage(pageNum) {
         this.pageRendering = true;
         this.pdfDoc.getPage(pageNum).then(page => {
           const viewport = page.getViewport({ scale: 1.5 });
           const canvas = this.$refs['pdf-canvas'];
           const ctx = canvas.getContext('2d');
           canvas.height = viewport.height;
           canvas.width = viewport.width;
           const renderContext = {
             canvasContext: ctx,
             viewport: viewport
           };
           page.render(renderContext).promise.then(() => {
             this.pageRendering = false;
             if (this.pageNumPending !== null) {
               this.renderPage(this.pageNumPending);
               this.pageNumPending = null;
             }
           });
         });
       }
     }
   }
   </script>

在上述代码中，loadPDF函数负责获取PDF文档，renderPage函数负责渲染指定页码的PDF。注意，你需要将path/to/your/pdf/file.pdf替换为你的PDF文件路径。

以上代码仅提供了基本的PDF加载和渲染功能，你可能需要根据自己的需求进行扩展，比如添加页面跳转、缩放控制等功能。