react-pdf implementa la vista previa en línea del pdf (pasar página, acercar, etc.)

Para realizar funciones como pasar páginas de documentos PDF, acercar y alejar y pantalla completa en reaccionar, también se eligió el complemento reaccionar-pdf y se pudo utilizar el complemento reaccionar-pdf. visto, pero se cargó todo de una vez La elección final El antiguo

complemento Ant Design Pro react-pdf

complemento Ant Design Pro react-pdf

Al mismo tiempo, también podemos utilizar el complemento reaccionar-pdf. p>

Dirección del complemento:

/package/react-pdf

Error después de ejecutar:

Solución:

Puedes cargar el pdf

Primero construye la interfaz según tu propio estilo

Algunas funciones son principalmente para modificar los parámetros del componente Página para lograr el efecto deseado

Modificar el componente Página para lograr el efecto deseado

La función principal es modificar los parámetros del componente Página para lograr el efecto deseado

La función principal es para modificar los parámetros del componente Página para lograr el efecto deseado Efecto deseado

Modifique el valor del atributo pageNumber de la página y agregue algunas restricciones específicas. Por ejemplo, si ha pasado a la primera o última página, la. El valor de entrada mínimo es 1 y el valor máximo es el total de páginas en el PDF.

Modifique el valor del atributo de ancho de Página. Si solo desea acercar o alejar, también puede usar la escala. atributo, pero es un poco complicado usarlo con ancho al mismo tiempo, por lo que solo puedes usar ancho

Página El valor del atributo ancho. Simplemente use ancho

El problema encontrado al acercar y alejar, en el diseño flexible centrado en la página, el zoom del pdf se desborda y no se puede mostrar completamente con la barra de desplazamiento

Agregado en el elemento secundario Estilo, fijo

estilo:

js:

Directamente en lt Documento file={{url: xxx, withCredentials}}.xxx, withCredentials: true}}/gt; no funciona, debes ponerlo en un estado

Ver problemas relacionados con el complemento:

/wojtekmaj/react-pdf/issues/308#issuecomment - 443538284