Vue implementa la función de vista previa de PDF

Con el desarrollo de Internet, los archivos PDF desempeñan un papel importante en el intercambio de información y documentos. Al implementar la función de vista previa de PDF en el componente Vue, podemos brindar a los usuarios una experiencia de lectura de contenido conveniente.

Al leer este artículo, los lectores aprenderán cómo implementar una poderosa función de vista previa de PDF en Vue para brindar a los usuarios una experiencia de lectura conveniente. Si usted es un desarrollador de Vue que recién comienza o un ingeniero de front-end con cierta experiencia, este artículo le brindará orientación detallada para implementar la función de vista previa de PDF paso a paso. ¡Continúe leyendo para comenzar su viaje con la función de vista previa de PDF de Vue!

1 antecedentes técnicos

1.1 Introducción y características de Vue.js

Vue.js es un marco progresivo para crear interfaces de usuario. Tiene las siguientes características:

Fácil de aprender y usar: el diseño API de Vue.js es simple e intuitivo, lo que permite a los desarrolladores comenzar rápidamente.
Enlace de datos receptivo: Vue.js utiliza un mecanismo de enlace de datos receptivo. Cuando los datos cambian, la página se actualizará automáticamente.
Desarrollo basado en componentes: Vue.js admite el desarrollo basado en componentes, dividiendo la interfaz en múltiples componentes reutilizables independientes para mejorar la capacidad de mantenimiento y reutilización del código.
DOM virtual: Vue.js utiliza tecnología DOM virtual para mantener un árbol DOM virtual en la memoria. Al comparar la diferencia entre los árboles DOM antiguos y nuevos, minimiza la cantidad de operaciones en el DOM real y mejora el rendimiento.

1.2 Introducción a la biblioteca PDF.js y descripción general de las funciones

PDF.js es una biblioteca de JavaScript desarrollada por Mozilla para mostrar archivos PDF en la Web. Tiene las siguientes funciones:

Renderice PDF de forma nativa en el navegador: PDF.js puede renderizar archivos PDF directamente en el navegador sin depender de complementos o software externos.
Admite funciones básicas de visualización y navegación: PDF.js proporciona algunas funciones básicas de visualización y navegación, como zoom, paso de página, búsqueda, etc.
Estilo e interacción personalizados: PDF.js permite a los desarrolladores personalizar el estilo de visualización y el comportamiento interactivo de los archivos PDF a través de API.
Soporte multiplataforma: PDF.js se ejecuta en una variedad de navegadores y sistemas operativos modernos, incluidos escritorio y dispositivos móviles.

1.3 ¿Por qué elegir la combinación de Vue y PDF.js para realizar la función de vista previa de PDF?

La combinación de Vue y PDF.js para realizar la función de vista previa de PDF tiene las siguientes ventajas:

Vue proporciona funciones de enlace de datos responsivo y desarrollo de componentes, que pueden administrar fácilmente el estado y la lógica del componente de vista previa de PDF.
PDF.js es una biblioteca JavaScript potente y fácil de usar que brinda la capacidad de representar PDF de forma nativa, con la flexibilidad de estilos e interacciones personalizados.
Tanto Vue como PDF.js son tecnologías de interfaz de usuario populares, con abundante soporte comunitario y recursos de documentación, que pueden ayudar a los desarrolladores a implementar la función de vista previa de PDF más rápidamente.
La combinación de Vue y PDF.js también puede aprovechar al máximo el ecosistema y la biblioteca de complementos de Vue, como Vuex, Vue Router, etc., para ampliar y mejorar aún más la función de vista previa de PDF.

2 Preparación del entorno de desarrollo

Antes de comenzar a usar Vue.js y PDF.js para implementar la función de vista previa de PDF, debe preparar el entorno de desarrollo. Aquí hay algunos pasos que lo ayudarán durante el proceso:

2.1 Instalar Node.js y Vue CLI

Primero, necesita instalar Node.js y npm (administrador de paquetes de Node). Node.js es un entorno de ejecución de JavaScript basado en el motor Chrome V8 para ejecutar código JavaScript en el lado del servidor. npm es el administrador de paquetes predeterminado para Node.js y se utiliza para instalar y administrar las dependencias requeridas por su proyecto.

Puede descargar e instalar la última versión de Node.js para su sistema operativo desde el sitio web oficial de Node.js (https://nodejs.org). Una vez instalado, abra una terminal o una ventana del símbolo del sistema e ingrese el siguiente comando para verificar que Node.js y npm se hayan instalado correctamente:

node -v
npm -v

A continuación, debe instalar Vue CLI (Vue Command Line Interface) globalmente, que es una herramienta para crear rápidamente proyectos Vue. Ejecute el siguiente comando en una terminal o ventana del símbolo del sistema para instalar:

npm install -g @vue/cli

Una vez que se completa la instalación, puede verificar que Vue CLI se instaló correctamente ejecutando el siguiente comando:

vue --version

2.2 Crear un proyecto Vue

Después de instalar Vue CLI, puede usarlo para crear un nuevo proyecto de Vue. En una terminal o ventana del símbolo del sistema, vaya al directorio donde desea crear el proyecto y ejecute el siguiente comando:

vue create my-project

Esto le pedirá que seleccione algunas opciones de configuración para crear el proyecto. Puede usar las opciones predeterminadas o personalizar la configuración según sus necesidades. Una vez configurado, Vue CLI descargará las dependencias requeridas y creará un nuevo proyecto de Vue.

Una vez creado el proyecto, ingrese al directorio del proyecto:

cd my-project

¡Ahora estás listo para comenzar a desarrollar! Puede utilizar cualquier editor de código que desee para abrir la carpeta del proyecto y seguir el siguiente paso para continuar implementando la función de vista previa de PDF.

3 Integre PDF.js en el proyecto Vue

Para integrar PDF.js en un proyecto de Vue, puede seguir estos pasos:

3.1 Descargar e importar la biblioteca PDF.js

Primero, necesitas descargar la biblioteca PDF.js. Puede descargar la última versión de PDF.js desde el repositorio oficial de GitHub (https://github.com/mozilla/pdf.js).

Una vez que haya descargado PDF.js, descomprímalo y cópielo en la carpeta de su proyecto Vue. Luego, cree una carpeta en su proyecto Vue llamada pdfjsy pegue el archivo PDF.js descomprimido en esa carpeta.

Luego, busque el archivo en su proyecto Vue public/index.htmly <head>agregue el siguiente código dentro de las etiquetas del archivo para incluir la biblioteca PDF.js:

<script src="./pdfjs/build/pdf.js"></script>

Esto completa la introducción de la biblioteca PDF.js.

3.2 Utilice elementos en componentes de Vue `<canvas>`para mostrar páginas PDF

Para mostrar páginas PDF en componentes de Vue, puede utilizar <canvas>elementos HTML5. En la plantilla del componente donde desea mostrar el PDF, agregue un <canvas>elemento como contenedor:

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

Este <canvas>elemento se utilizará para representar páginas PDF.

3.3 Utilice la API proporcionada por PDF.js para cargar y renderizar archivos PDF

Ahora puede escribir la lógica para cargar y representar archivos PDF en la parte JavaScript del componente Vue. En la etiqueta del componente Vue <script>, agregue el siguiente código:

export default {
    
    
  mounted() {
    
    
    this.loadPDF();
  },
  methods: {
    
    
    async loadPDF() {
    
    
      const pdfUrl = 'path/to/your/pdf/file.pdf'; // 替换为您的PDF文件路径
      
      const loadingTask = window.PDFJS.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      
      const page = await pdf.getPage(1); // 加载第一页
      const viewport = page.getViewport({
    
     scale: 1 });
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      const renderContext = {
    
    
        canvasContext: context,
        viewport: viewport
      };
      
      await page.render(renderContext);
    }
  }
}

El código anterior primero usa window.PDFJS.getDocument()el método para cargar el archivo PDF y devuelve un objeto Promise. Luego, obtenemos <canvas>el elemento y su contexto. A continuación, usamos pdf.getPage()el método para cargar la primera página del PDF y usamos page.getViewport()el método para obtener la información de la ventana gráfica de la página.

Después de eso, configuramos <canvas>la altura y el ancho del elemento para que se ajuste a la vista de la página y creamos un objeto de contexto de representación. Finalmente, llamamos page.render()al método para representar la página PDF <canvas>en el elemento.

3.4 Implementar funciones de cambio de página y zoom

Para realizar las funciones de cambio y zoom de las páginas PDF, puede escribir algunos métodos adicionales y vincular los eventos correspondientes en la plantilla.

Por ejemplo, puede agregar dos botones para alternar entre las páginas anterior y siguiente:

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="previousPage">Previous Page</button>
    <button @click="nextPage">Next Page</button>
  </div>
</template>

Luego, agregue el siguiente código en la sección JavaScript del componente Vue:

export default {
    
    
  data() {
    
    
    return {
    
    
      pdf: null,
      currentPage: 1
    };
  },
  mounted() {
    
    
    this.loadPDF();
  },
  methods: {
    
    
    async loadPDF() {
    
    
      // ...
    },
    async previousPage() {
    
    
      if (this.currentPage > 1) {
    
    
        this.currentPage--;
        await this.renderPage(this.currentPage);
      }
    },
    async nextPage() {
    
    
      if (this.currentPage < this.pdf.numPages) {
    
    
        this.currentPage++;
        await this.renderPage(this.currentPage);
      }
    },
    async renderPage(pageNumber) {
    
    
      const page = await this.pdf.getPage(pageNumber);
      const viewport = page.getViewport({
    
     scale: 1 });
      
      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);
    }
  }
}

En este ejemplo, inicializamos data()una currentPagevariable nombrada usando el método y la vinculamos en la plantilla. Luego, escribimos previousPage()métodos nextPage()para actualizar currentPagey llamar renderPage()a métodos para volver a representar la página.

De esta manera, puede implementar una funcionalidad simple de cambio de página. De manera similar, también puede escribir otros métodos para implementar funciones como hacer zoom y saltar números de página.

4 Manejo de la carga y los errores de PDF

Al integrar PDF.js en un proyecto de Vue, puede manejar la carga de PDF y los errores con los siguientes pasos:

4.1 Mostrar barra de progreso de carga

Para mostrar una barra de progreso de carga, puede utilizar los componentes y la gestión de estado del marco Vue. Primero, cree una variable en su componente Vue loadingpara indicar si el PDF se está cargando:

data() {
    
    
  return {
    
    
    loading: true,
  };
},

Luego, en la plantilla, loadingmuestra u oculta la barra de progreso de carga según el valor de la variable. Puede utilizar la directiva de representación condicional de Vue ( v-if) para lograr esto. Por ejemplo, puedes agregar un componente de animación de carga de pantalla completa a tu plantilla y loadingasociarlo con una variable:

<template>
  <div>
    <loading-spinner v-if="loading"></loading-spinner>
    <!-- 其他内容 -->
  </div>
</template>

loadingEstablezca la variable cuando el PDF comience a cargarse truey configúrela cuando se complete la carga false.

4.2 Manejo de errores y excepciones de carga

PDF.js proporciona API para manejar errores y excepciones de carga. Puede utilizar estas API para detectar y manejar errores que puedan ocurrir durante la carga.

Primero, en el método del componente Vue, use getDocument()la función de PDF.js para cargar el archivo PDF. Esta función devuelve un objeto Promise que puede usar .catch()para detectar errores durante la carga:

loadPDF() {
    
    
  PDFJS.getDocument('/path/to/pdf/file.pdf')
    .then((pdf) => {
    
    
      // 加载成功后的处理逻辑
    })
    .catch((error) => {
    
    
      // 加载错误时的处理逻辑
    });
},

En catch()el método, puede realizar la operación correspondiente según el tipo de error específico. Por ejemplo, puede mostrar un mensaje de error si falla la carga:

.catch((error) => {
    
    
  console.error('PDF 加载错误:', error);
  this.showErrorMessage = true;
});

En las plantillas, puede utilizar la directiva de representación condicional ( v-if) para mostrar mensajes de error:

<template>
  <div>
    <div v-if="showErrorMessage" class="error-message">PDF 加载失败，请重试。</div>
    <!-- 其他内容 -->
  </div>
</template>

De esta manera, cuando ocurra un error de carga, se mostrará un mensaje de error.

Además de detectar errores de carga, también puede utilizar otras API proporcionadas por PDF.js para manejar excepciones. Por ejemplo, podría utilizar pdf.numPagesuna propiedad para obtener el número total de páginas de un archivo PDF y realizar un procesamiento adicional una vez completada la carga.

5 para lograr otras funciones

5.1 Control de número de página

Para implementar la función de control de número de página, puede crear un cuadro de entrada o una lista desplegable en el proyecto Vue para que el usuario ingrese o seleccione el número de página deseado. Luego, después de que el usuario envía el formulario o selecciona un número de página, puede usar la API proporcionada por PDF.js para colocar la vista en la página especificada.

Primero, necesita definir una variable en su componente Vue para almacenar el número de página actual, por ejemplo currentPage. Luego, puede crear un cuadro de entrada o una lista desplegable en la plantilla y vincularlo con currentPagevariables. Cuando el usuario cambia el número de página, currentPagela variable se actualiza automáticamente.

A continuación, debe manejar la lógica de cambio de número de página en los métodos del componente Vue. Puede utilizar los métodos proporcionados por PDF.js pdfViewer.scrollPageIntoView()para desplazar la vista a la página especificada. Por ejemplo:

methods: {
    
    
  goToPage() {
    
    
    // 将字符串转换为数字类型
    const pageNumber = parseInt(this.currentPage, 10);

    if (pageNumber >= 1 && pageNumber <= this.totalPages) {
    
    
      pdfViewer.scrollPageIntoView({
    
    
        pageNumber,
      });
    }
  },
},

En el código anterior, primero convertimos el número de página ingresado por el usuario a un tipo numérico y nos aseguramos de que esté en el rango válido (de 1 al número total de páginas). Luego usamos scrollPageIntoView()el método para desplazar la vista a la página especificada.

Finalmente, puede agregar un botón o un detector de eventos de envío de formulario a su plantilla para llamar a un método cuando el usuario hace clic en el botón o envía el formulario goToPage().

5.2 Navegación en miniatura

Para implementar la función de navegación en miniatura, puede utilizar los objetos proporcionados por PDF.js pdfThumbnailViewerpara mostrar miniaturas. Primero, debe crear un elemento en el componente Vue para contener la miniatura. Luego, inicialice la miniatura en la función de enlace del ciclo de vida del componente Vue (como mounted) y vincúlela al elemento correspondiente.

mounted() {
    
    
  const thumbnailContainer = document.getElementById('thumbnail-container');

  pdfThumbnailViewer.initialize(thumbnailContainer, pdfDocument);
},

En el código anterior, primero getElementById()obtenemos el elemento DOM del contenedor de miniaturas a través del método. Luego, usamos initialize()el método para inicializar y vincular la miniatura al contenedor.

Finalmente, puedes agregar un elemento con una identificación única a tu plantilla como marcador de posición para el contenedor de miniaturas.

<div id="thumbnail-container"></div>

De esta manera, cuando se monte el componente Vue, la miniatura se cargará y mostrará automáticamente en el contenedor especificado.

5.3 Función de búsqueda de texto

Para implementar la función de búsqueda de texto, puede utilizar los objetos proporcionados por PDF.js pdfFindControllerpara realizar operaciones de búsqueda de texto. Primero, debe crear un cuadro de entrada en el componente Vue para que los usuarios ingresen las palabras clave que buscarán. Luego, maneje la lógica de búsqueda en un método del componente Vue.

Primero, debe definir una variable para almacenar la palabra clave ingresada por el usuario, por ejemplo searchKeyword. Luego, cuando el usuario envía el formulario o presiona la tecla Intro, puede utilizar pdfFindController.executeCommand()los métodos proporcionados por PDF.js para realizar operaciones de búsqueda.

methods: {
    
    
  search() {
    
    
    pdfFindController.executeCommand('find', {
    
    
      query: this.searchKeyword,
      highlightAll: true,
    });
  },
},

En el código anterior, usamos executeCommand()el método para ejecutar el comando de búsqueda y pasar un objeto de configuración que contiene las palabras clave de la consulta y si se deben resaltar todas las coincidencias.

De esta manera, cuando el usuario realiza una búsqueda de texto, PDF.js buscará y resaltará automáticamente el contenido de texto que coincida con la palabra clave.

6 Optimización y ajuste del rendimiento

La optimización y el ajuste del rendimiento son aspectos importantes para garantizar que las aplicaciones se ejecuten de manera eficiente. A continuación se presentan algunas sugerencias de optimización y ajuste del rendimiento al implementar la función de vista previa de PDF:

6.1 Carga diferida de páginas PDF

La carga diferida se refiere a cargar páginas cuando es necesario mostrarlas, en lugar de cargar todas las páginas a la vez. Esto mejora la velocidad de carga inicial y reduce el uso de recursos. Puede utilizar los componentes asincrónicos de Vue o la carga bajo demanda para implementar la carga diferida de páginas PDF.

6.2 Almacenamiento en caché de páginas cargadas

Para evitar volver a cargar el archivo PDF cada vez que cambia de página, puede almacenar en caché las páginas cargadas en el lado del cliente (como un navegador). De esta manera, cuando el usuario vuelve a visitar la misma página, la página se puede recuperar directamente del caché sin tener que volver a descargar y renderizar el archivo PDF.

6.3 Comprimir y optimizar el tamaño del archivo PDF

El tamaño de un archivo PDF tiene un gran impacto en el tiempo de carga y el rendimiento. Puede utilizar varias herramientas y técnicas para comprimir y optimizar el tamaño de los archivos PDF. Por ejemplo, se pueden utilizar herramientas profesionales como Adobe Acrobat para optimizar, eliminar metadatos innecesarios, incrustar subconjuntos de fuentes, comprimir imágenes y más. Además, considere utilizar el formato WebP en lugar del formato JPEG para reducir aún más el tamaño del archivo.

A través de las medidas de optimización y ajuste del rendimiento anteriores, puede mejorar la velocidad de carga y el rendimiento de la función de vista previa de PDF y brindar una mejor experiencia de usuario.

7 Pruebas y solución de problemas

7.1 Pruebas funcionales y de rendimiento utilizando herramientas de prueba

Después de implementar la función de vista previa de PDF en el proyecto de desarrollo Vue, el uso de herramientas de prueba puede ayudarnos a verificar la exactitud de la función y evaluar el rendimiento. A continuación se muestran algunas herramientas de prueba de uso común:

Jest: Jest es un marco de prueba de JavaScript popular para pruebas unitarias y pruebas de integración. Puede escribir varios casos de prueba en el componente de vista previa de PDF y ejecutar esas pruebas usando Jest.
Puppeteer: Puppeteer es una biblioteca Node.js que proporciona una API para controlar el navegador Headless Chrome. Puede utilizar Puppeteer para simular la interacción del usuario con la interfaz de vista previa de PDF y comprobar que los resultados esperados sean los esperados.
Cypress: Cypress es un marco de pruebas front-end de un extremo a otro que simula la interacción del usuario con aplicaciones en un entorno de navegador real. Puede utilizar Cypress para escribir scripts de prueba automatizados para probar la función de vista previa de PDF y generar informes de prueba detallados.

7.2 Solucionar y resolver problemas y errores comunes

Durante el proceso de desarrollo, se pueden encontrar algunos problemas y errores comunes. A continuación se ofrecen algunas sugerencias para solucionar problemas y resolver el problema:

Ver el resultado de la consola del navegador: cuando haya un problema con la función de vista previa de PDF, abra las herramientas de desarrollo del navegador y vea el resultado de la consola para detectar posibles mensajes de error.
Verifique la solicitud de red: asegúrese de que el archivo PDF se cargue correctamente y devuelva el contenido esperado. Verifique el código de estado de la solicitud de red, los encabezados de respuesta y el cuerpo de la respuesta para detectar problemas.
Verifique las versiones de dependencia: si está utilizando una biblioteca o un complemento de terceros para la función de vista previa de PDF, asegúrese de que la versión que está utilizando sea compatible con su proyecto y no tenga problemas ni errores conocidos.
Lea la documentación y el soporte de la comunidad: lea la documentación oficial de la biblioteca correspondiente para encontrar problemas y soluciones comunes. Además, participe en la comunidad de desarrolladores para obtener ayuda y consejos.
Depure su código: utilice herramientas de depuración como Chrome DevTools para establecer puntos de interrupción en su código, revisarlo y observar los valores de variables y funciones para encontrar problemas potenciales.
Limite el alcance: si el problema no se puede resolver, intente limitarlo, cree un proyecto de ejemplo simplificado o cópielo en un editor en línea como CodeSandbox y pruébelo para determinar si el problema es causado por su código o el entorno. configuración.

A través de los métodos anteriores, puede solucionar y solucionar mejor los problemas y errores comunes, y garantizar el funcionamiento normal de la función de vista previa de PDF.

8 resumen

En este artículo, aprendimos cómo implementar la funcionalidad de vista previa de PDF en un entorno Vue. Guiamos a los lectores a través de la instalación y configuración de las dependencias del proyecto, y les presentamos cómo seleccionar y utilizar una biblioteca de renderizado de PDF adecuada. Mostramos cómo cargar y mostrar archivos PDF, agregando herramientas de navegación y otras funciones para brindar a los usuarios una mejor experiencia de lectura.

Con la guía de este artículo, los lectores pueden comenzar e implementar rápidamente la función de vista previa de PDF en sus propios proyectos de Vue. Ya sea un principiante o un desarrollador experimentado, este artículo le proporciona pasos claros y código de muestra para ayudarle a completar la tarea con facilidad.

La función de vista previa de PDF puede desempeñar un papel importante en varios escenarios, como la lectura de documentos en línea, lectores de libros electrónicos, etc. Espero que este artículo le ayude a agregar esta funcionalidad y mejorar la experiencia del usuario.

Gracias por leer este artículo. Espero que pueda continuar explorando y aplicando la tecnología Vue a través del aprendizaje y la práctica, y mejorar sus capacidades de desarrollo. ¡Buena suerte con tus proyectos futuros!