Extraer Texto de un PDF usando JavaScript: Una Guía Simple

La manipulación de archivos PDF es una tarea común en el desarrollo web y muchas veces necesitamos extraer texto de estos documentos para realizar análisis, indexación o simplemente para mostrar contenido en nuestra aplicación. En este artículo, exploraremos cómo extraer texto de un PDF utilizando JavaScript.

¿Por qué extraer texto de un PDF en JavaScript?

JavaScript es uno de los lenguajes de programación más utilizados en el desarrollo web. Con la creciente demanda de aplicaciones web interactivas y dinámicas, JavaScript se ha convertido en una opción popular para manipular archivos PDF directamente en el navegador del usuario, sin necesidad de enviar los archivos al servidor.

Extraer texto de un PDF en JavaScript puede ser útil por varias razones. Algunas de las razones más comunes incluyen:

Indexación de contenido: Extraer texto de un PDF permite indexar el contenido del archivo, lo que facilita la búsqueda y recuperación de información específica.
Análisis de datos: Al extraer texto de un PDF, se pueden realizar análisis y procesamiento automatizado del contenido para extraer insights o realizar tareas como clasificación, resumen automático, extracción de entidades, entre otras.
Análisis de datos: Al extraer texto de un PDF, se pueden realizar análisis y procesamiento automatizado del contenido para extraer insights o realizar tareas como clasificación, resumen automático, extracción de entidades, entre otras.
Accesibilidad: Convertir el contenido de un PDF a texto plano puede mejorar la accesibilidad para personas con discapacidades visuales u otras necesidades especiales al permitir que utilicen lectores de pantalla u otras tecnologías asistivas.
Integración con otros sistemas: Al extraer texto del PDF, se puede integrar fácilmente el contenido en otros sistemas o aplicaciones para su posterior procesamiento o visualización.

Pasos para Extraer Texto de un PDF con JavaScript:

Obtener un PDF:

Lo primero que necesitamos es un archivo PDF del cual queremos extraer el texto. Podemos usar un archivo existente o generar uno dinámicamente. o puden hacer usa de este pdf dummy que dejo aqui.

Cargar el PDF:

Utilizaremos una biblioteca JavaScript para cargar el PDF en el navegador. Una de las bibliotecas más populares para este propósito es PDF.js, desarrollada por Mozilla. Esta biblioteca nos permite trabajar con archivos PDF de forma eficiente directamente en el navegador.

Comenzamos agregando la biblioteca PDF.js, ya sea que la haz descargado o estas usando el cdn. Creamos un HTML e incluimos la libreria.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Include pdf.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
</head>

<body>
    
</body>
</html>

Crear el HTML para subir el pdf al que extraer el texto.

Para este paso vamos a agregar tres contenedores, en los cuales incluiremos el titulo de la pagina, mas el input para subir el PDF al que le vamos a extaer el texto, y uno ultimo para presentar el texto extraido. De esta manera continuamos con el codigo de arriba, al que le incluiremos la parte HTML dentro de la etiqueta <body>

...
</head>
<body>
    <div>
        <h1>Extractor de Texto</h1>
    </div>
    <div>
        <input type="file" id="fileInput" accept=".pdf" />
    </div>
    <div id="output"></div>
</body>
</html>

Como Comenzar a Extraer Texto del PDF:

Una vez que hemos cargado el PDF, y hemos agregado nuestro HTML, podemos extraer el texto de cada página utilizando las funciones proporcionadas por PDF.js. PDF.js nos permite acceder al contenido de cada página del PDF en forma de texto.

Para esta parte, vamos a crear la variable que guardara la localizacion del documento pdf. Luego usaremos las funciones dichas anteriormente que contine la libreria PDF.js para extraer el texto del pdf.

Declarar el script (presta atencion a que el contenido en negritas es el nuevo codigo que vamos agregado):

Lo primero sera cargar el script del trabajador de PDF.js, que es necesario para procesar archivos PDF.

<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
</script>

Luego vamos a agregar un «event listener» al campo de entrada de archivo. Cuando se selecciona un archivo, se activa este evento y se ejecuta el código dentro de la función.

<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

  document.getElementById('fileInput').addEventListener('change', function(event) { 
    ... 
  });
</script>

Ahora vamos a obtener el archivo PDF seleccionado por el usuario.

<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

  document.getElementById('fileInput').addEventListener('change', function(event) { 
    var file = event.target.files[0];
  });
</script>

Creamos un objeto FileReader para leer el contenido del archivo PDF.

<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

  document.getElementById('fileInput').addEventListener('change', function(event) { 
    var file = event.target.files[0];
    var reader = new FileReader();
  });
</script>

Vamos a definir una función para manejar el evento de carga del archivo. Dentro de esta función, se lee el contenido del archivo PDF.

<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

  document.getElementById('fileInput').addEventListener('change', function(event) { 
    var file = event.target.files[0];
    var reader = new FileReader();

   reader.onload = function(event) { 
     ... 
   };
  });
</script>

Convertimos el contenido del archivo en un Uint8Array, que es necesario para cargar el PDF con PDF.js.

.... 
reader.onload = function(event) { 
     var typedarray = new Uint8Array(event.target.result);
   };
....

Cargamos el PDF utilizando PDF.js y manejamos el PDF resultante dentro de una promesa. Inicializamos una variable para almacenar el texto extraído del PDF llamada text. Y luego vamos a iterar sobre cada página del PDF usando un for loop.

.... 
reader.onload = function(event) { 
     var typedarray = new Uint8Array(event.target.result);
     pdfjsLib.getDocument(typedarray).promise.then(function(pdf) {
        var text = "";
        var numPages = pdf.numPages;
        for (var i = 1; i <= numPages; i++) { 
          ... 
        }
     });
   };
....

Procesar el Texto:

Dependiendo de nuestros requisitos, es posible que necesitemos procesar el texto extraído aún más. Podemos realizar tareas como eliminación de espacios en blanco, eliminación de caracteres no deseados o análisis lingüístico utilizando expresiones regulares u otras técnicas de procesamiento de texto.

Para este tutorial, vamos a solo extraer el texto y vamos a incluir cada linea en un parrafo por separado.

.... 
reader.onload = function(event) { 
     var typedarray = new Uint8Array(event.target.result);
     pdfjsLib.getDocument(typedarray).promise.then(function(pdf) {
        var text = "";
        var numPages = pdf.numPages;
        for (var i = 1; i <= numPages; i++) { 
          pdf.getPage(i).then(function(page){
             page.getTextContent().then(function(content){
                content.items.forEach(function(item){
                    text += "<p>" + item.str + "</p>";
                });
             });
          });
        }
     });
   };
....

Utilizar el Texto Extraído:

Una vez que hemos extraído y procesado el texto del PDF, podemos utilizarlo en nuestra aplicación web para diversos fines, como mostrarlo al usuario, realizar búsquedas en el texto o analizar su contenido.

Para esta parte, vamos a usar la variable que creamos anteriormente para alojar el texto y luego lo agregaremos al document HTML.

Codigo

Vamos a usar setTimeout como temporizador para mostrar el texto extraído después de un segundo. Esto puede ser útil si el procesamiento del PDF lleva tiempo.


setTimeout(function(){                      document.getElementById('output').innerHTML = text;
}, 1000);

Mostramos finalmente el texto dentro del contendor con el id output.

reader.readAsArrayBuffer(file);

Resultado

Aqui les dejo el codigo completo:

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
        
        document.getElementById('fileinput').addEventListener('change', function(ev){
            var file = ev.target.files[0];
            var reader = new FileReader();
            
            reader.onload = function(ev){
                var typedarray = new Uint8Array(ev.target.result);
                

                pdfjsLib.getDocument(typedarray).promise.then(function(pdf){
                    var text = "";
                    var numPages = pdf.numPages;
                    

                    for(var i = 1; i <= numPages; i++){
                        pdf.getPage(i).then(function(page){
                            page.getTextContent().then(function(content){
                                content.items.forEach(function(item){
                                    text += "<p>" + item.str + "</p>";
                                });
                            });
                        });
                    }
                    

                    setTimeout(function(){
                        document.getElementById('output').innerHTML = text;
                    }, 1000);
                });
            };
            
            reader.readAsArrayBuffer(file);
        });

Espero les guste este articulo y nos vemos en proximas publicaciones.