react-pdf-viewer里面renderPage的使用方法

很高兴能够回答你的问题。在react-pdf-viewer中，renderPage方法用于渲染PDF文档的一页。它需要两个参数：pageIndex和canvasContext。pageIndex指定要渲染的页面索引，canvasContext则是指定页面将要渲染到的画布上下文。希望这个回答能够帮到你。

相关问题

react pdfjs-dist

### 集成 `pdfjs-dist` 库到 React 项目

为了在 React 项目中集成并使用 `pdfjs-dist` 来实现 PDF 文件预览，可以按照如下方法操作：

#### 安装依赖包
首先，在命令行工具中执行 npm 或 yarn 命令来安装必要的软件包。

npm install pdfjs-dist --save

或者如果偏好使用 Yarn，则运行:

yarn add pdfjs-dist

这会下载 `pdfjs-dist` 及其所需的全部依赖项至项目的 node_modules 目录下[^1]。

#### 加载 Web Worker 和 CMap 资源文件
由于 `pdfjs-dist` 默认配置需要加载 worker 和 cmap 字符映射表资源，因此还需要引入这些辅助脚本。可以在入口 JavaScript 文件 (通常是 index.js 或 main.jsx) 的顶部加入以下代码片段以确保它们被正确加载。

import * as pdfjsLib from 'pdfjs-dist';
// 如果使用构建版本则需指定worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString();

这段设置指定了用于处理 PDF 解析工作的 web worker 所处的位置，这对于提高性能至关重要[^2].

#### 创建自定义组件渲染 PDF 文档页面
创建一个新的 React 组件用来显示单页或多页的 PDF 内容。下面是一个简单的例子展示了如何读取远程服务器上的 PDF 并逐页呈现出来。

import React, { useState, useEffect } from 'react';
import * as pdfjsLib from 'pdfjs-dist';

const PdfViewer = ({ url }) => {
  const [numPages, setNumPages] = useState(null);
  
  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  async function renderPage(pageNumber) {
    try {
      let loadingTask = pdfjsLib.getDocument(url);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(pageNumber);

      var scale = 1.5; // 放大比例
      var viewport = page.getViewport({ scale });

      // 准备 canvas 元素绘制 PDF 页面图像
      let canvas = document.createElement('canvas');
      let context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // 将 canvas 添加到 DOM 结构里
      document.body.appendChild(canvas); 

      // 渲染 PDF 页面内容到 canvas 上下文中去
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
      
    } catch(error){
      console.error(`Error rendering page ${pageNumber}:`, error.message);
    }
  }

  useEffect(() => {
    if (!url || !window.URL.createObjectURL) return;
    
    fetch(url)
      .then(response => response.blob())
      .then(blobData => {
        const objectUrl = window.URL.createObjectURL(blobData);
        
        pdfjsLib.getDocument(objectUrl).promise.then(onDocumentLoadSuccess);
      })
      .catch(err => console.log(err));
  }, [url]);

  return (
    <div>
      {Array.from(new Array(numPages), (_, i) =>
          <button key={i} onClick={() => renderPage(i + 1)}>
            Page {i + 1}
          </button>)}
    </div>
  );
};

export default PdfViewer;

此组件接收一个名为 `url` 的属性作为输入参数，该参数指向待查看的 PDF 文件位置；通过调用 `renderPage()` 方法可按需动态生成各页视图[^3].

前端预览pdf 手势缩放

### 实现前端网页中PDF文件的手势缩放功能

为了实现在前端网页中的PDF手势缩放功能，可以采用`pdf.js`库并结合HTML5和JavaScript来完成。此方法适用于移动端设备上的浏览器环境。

#### 方法概述

通过使用`pdf.js`加载PDF文档到Web页面上，并利用触摸事件监听器捕捉用户的触控操作，如捏合放大缩小动作。当检测到这些特定的手势时，则相应调整显示比例以达到视觉上的缩放效果[^1]。

#### 代码实现

下面是一个简单的例子说明如何基于React框架创建一个支持手势缩放的PDF查看组件：

import React, { useRef, useEffect } from "react";
import pdfjsLib from "pdfjs-dist";

// 设置全局变量用于存储当前渲染页数以及缩放级别
let pageNumber = 1;
let scale = 1;

function PdfViewer({ url }) {
    const canvasRef = useRef(null);

    // 加载指定URL地址对应的PDF文件
    async function loadPdf() {
        try {
            const loadingTask = pdfjsLib.getDocument(url);
            const doc = await loadingTask.promise;
            
            renderPage(doc);    
        } catch (error) {
            console.error('Error loading PDF:', error.message);
        }
    }

    // 渲染单个页面图像至Canvas画布之上
    function renderPage(pdfDoc) {
        const page = pdfDoc.getPage(pageNumber);
        
        page.then((pageObj) => {
            const viewport = pageObj.getViewport({scale});
            const canvas = canvasRef.current;
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            pageObj.render(renderContext);
        });
    }

    // 处理双指张开闭合触发的比例变化逻辑
    function handleGesture(event){
        event.preventDefault();
        let gestureEvent = event.touches.length === 2 ? true : false;
        if(gestureEvent && typeof lastDistance !== undefined){
            let currentDist = Math.hypot(
                event.touches[0].clientX - event.touches[1].clientX,
                event.touches[0].clientY - event.touches[1].clientY
            );
            let diff = currentDist / lastDistance;
            setScale(scale*diff);
            renderAllPages();  
        }
        lastDistance = Math.hypot(
            event.touches[0].clientX - event.touches[1].clientX,
            event.touches[0].clientY - event.touches[1].clientY
        );
    }

    // 初始化设置
    useEffect(() => {
        window.addEventListener('gesturechange',handleGesture);
        loadPdf();

        return () => {
            window.removeEventListener('gesturechange',handleGesture);
        };
    }, []);

    return (
        <canvas ref={canvasRef}></canvas>
    )
}

export default PdfViewer;

上述代码片段展示了怎样构建一个基本的支持手势控制的功能模块，其中包含了对PDF文档的基本处理流程——获取、解析、绘制；同时也实现了对于多点触控输入（即两根手指之间的距离改变）作出响应的能力，从而允许用户直观地调节视图大小[^4]。