使用pdf.js在Vue、React中预览Pdf文件,支持PC端、移动端

在Vue和React中使用pdf.js预览PDF文件，可以遵循以下步骤：

1. 安装pdf.js库。
2. 在Vue或React组件中引入pdf.js。
3. 创建一个canvas或div来渲染PDF文件。
4. 使用fetch或其他方式获取PDF文件。
5. 使用pdf.js的API渲染PDF文件。

以下是在Vue和React中实现的示例代码：

Vue 示例

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import { getDocument } from 'pdfjs-dist/webpack';
 
export default {
  name: 'PdfViewer',
  props: {
    pdfUrl: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const loadingTask = getDocument(this.pdfUrl);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
 
      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
      };
 
      await page.render(renderContext).promise;
    }
  }
};
</script>

React 示例

import React, { useRef, useEffect } from 'react';
import { getDocument } from 'pdfjs-dist/webpack';
 
const PdfViewer = ({ pdfUrl }) => {
  const pdfCanvas = useRef(null);
 
  useEffect(() => {
    (async () => {
      const loadingTask = getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
 
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = pdfCanvas.current;
      const context = canvas.getContext('2d');
 
      canvas.height = viewport.height;
      canvas.width = viewport.width;
 
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
 
      await page.render(renderContext).promise;
    })();
  }, [pdfUrl]);
 
  return <canvas ref={pdfCanvas} />;
};
 
export default PdfViewer;

在这两个示例中，我们都使用了pdfjs-dist库中的getDocument函数来获取PDF文档，然后使用getPage获取第一页，并使用render方法渲染页面到canvas元素中。这里的scale参数可以根据需要调整，以适应不同屏幕大小的显示。

请确保在实际部署时，对pdf.js进行适当的配置和优化，以满足生产环境的性能要求。