【uniapp/vue/pdf.js】在 uniapp 中使用 pdf.js（可以实现在电脑和手机上预览 pdf 文件）

在uniapp中使用pdf.js来预览PDF文件，可以通过以下步骤实现：

1. 安装pdf.js库：

   通过npm或者直接下载pdf.js文件到项目中。

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

   在index.html中通过script标签引入或者在组件中import。

3. 创建PDF.js的实例，并且渲染PDF文件。

以下是一个简单的示例代码：

<!-- index.html -->
<script src="path/to/pdf.js"></script>

<template>
  <view>
    <canvas canvas-id="pdf-canvas" style="width: 100%; height: 500px;"></canvas>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      pdfPath: 'path/to/your/pdf/file.pdf', // 你的PDF文件路径
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      canvas: null,
      ctx: null
    }
  },
  mounted() {
    this.loadPDF();
  },
  methods: {
    loadPDF() {
      const pdfjsLib = window['pdfjs-dist/webpack'];
      pdfjsLib.getDocument(this.pdfPath).promise.then(pdfDoc => {
        this.pdfDoc = pdfDoc;
        this.renderPage(this.pageNum);
      }).catch(err => {
        console.error('Loading PDF error: ', err);
      });
    },
    renderPage(pageNum) {
      this.pageRendering = true;
      const pdfjsLib = window['pdfjs-dist/webpack'];
      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
        };
        const renderTask = page.render(renderContext);
        renderTask.promise.then(() => {
          this.pageRendering = false;
        });
      });
    }
  }
}
</script>

在这个例子中，我们首先在mounted钩子中加载PDF文档，然后在loadPDF方法中渲染第一页。renderPage方法负责渲染指定页码的PDF页面。

注意：

• 请确保你的PDF.js版本与uniapp兼容。
• 你需要处理PDF文件的加载和渲染错误。
• 根据你的需求，你可能需要添加页面跳转、缩放等功能。