Nueva Utilidad: Visualizador previo de PDF 📄 - Para crear catálogos y mas

Una imagen previa de esta utilidad

Es simple, usa una lista de rutas para tus archivos PDF, ejecútalo y listo. Y quedaría bastante bien con estilos, pero ese trabajo, es según los requisitos.


Problema:

¡Piense rápido! Recuerda las veces que ha pasado por una biblioteca virtual, una tienda de libros o quizás quiera crear su propio estante virtual (sería interesante de hacerlo). Este componente le ahorra tiempo al preparar todo ello, ya que la imagen dibujada, tomara la 1era página del PDF, (y normalmente su portada está en ella) asignado. Su próximo estante o biblioteca virtual esta más próximo.

La visualización de este componente es dinámica, a diferencia del componente de Tarjeta de Editor JS, este creara todos los elementos HTML automáticamente con sus respectivos PDF para mostrar.


Función:

Se provee de una lista JS que contiene todas las rutas para los archivos PDF a usar (la lista también se la puede proveer una API), luego, una función principal itera sobre ella, y crea elementos HTML para cada uno, al terminar, los añade en un contenedor que aloja a todos los PDF (esto es opcional, puede removerlo).

Para lograr la captura de la imagen se usó PDF.js, el cual puedes conocer más de él, en el siguiente enlace:

PDF.js

La idea de esta serie de utilidades es brindar una base o componentes que puedes usar en tus proyectos sin restricciones, porque eres libre de usarlo. 

Aquí está el enlace de esta utilidad:

Utilidad de Visualización de PDF en pagina web

Se parte de esta utilidad, mejorando o reportando errores 🙂






Comentarios

Publicar un comentario

Entradas más populares de este blog

Nueva Utilidad: All colors CSS

Imagen
Esta pequeña utilidad te ayudara con los colores que necesites en el momento sin necesidad de usar CSS, con solo implementar una clase, ya integra el color, como en la fuente o el fondo.      La idea es brindar fluidez en el estudio o experimentación.      Vea este repositorio en:  All colors CSS      Problema: A menudo debía ver como trabajaban las propiedades 'flex' o grid    de CSS o alguna maquetación rápida para plasmar la idea que traía en mente, había que aplicar algún estilo como el color para    visualizarlo, por ello, creaba clases con colores para distinguir    a mis elementos. De esta necesidad, cree estos archivos el cual me facilitan la    visualización de mi página web, y si te interesa probarlo, aquí    está el enlace, espero te sea útil y cómodo de usar:                | Utility 📦 |All colors CSS       Uso ...
Leer más

Nueva Utilidad: Card Learn 💻 - Code Editor ✍

Imagen
Una imagen previa de este pequeño componente ¡Hola a todos!, les presento una simple y pequeña utilidad la cual puedes incorporar en tu aplicación o sitio web, su propósito es brindar un entorno en el cual el usuario puede repasar las notas creadas y adjuntar código en ella, además de agregar un editor interactivo de Javascript, el cual esta estilizado usando Prism. Problema: Recientemente estuve estudiando más sobre el desarrollo web, principalmente JS y CSS. DOM(Document Object Model) fue muy interesante de usar, me gusto, por lo que entonces recordé, que hace unos meses tuve la idea de crear un editor de código simple, entonces mientras iba experimentando cómo funcionaba el DOM, noté que podría crear un editor con ello y además crear una herramienta que puede ayudarte a estudiar, dejando notas sobre conceptos o funciones de la tecnología HTML provee de elementos para el recibo de datos, como el texto, esto sería un reto para lo que estoy estudiando, y entonces me decidi a realizarl...
Leer más