Use código bajo para realizar la función de impresión de formularios

En nuestros escenarios de desarrollo diario, la impresión de formularios es un escenario relativamente común. El Wi-Fi en sí no tiene una función de impresión. Necesitamos una biblioteca de terceros para lograr la impresión.

1 Presentación de bibliotecas de terceros

Si necesita introducir una biblioteca de terceros en la microconstrucción, debe abrir la aplicación en la que se encuentra, navegar hasta el último menú en la barra lateral del editor de la aplicación e ingresar la dirección de nuestra biblioteca de terceros

.

https://html2canvas.hertzen.com/dist/html2canvas.min.js

Asegúrese de que la dirección sea accesible al importar la biblioteca

Los amigos que están familiarizados con el desarrollo front-end pueden estar más acostumbrados a usar npm para la instalación. Microbuild no admite la forma de npm y solo puede importar js externo

2 Construye la página

Cuando imprimimos, generalmente lo usamos en el lado de la PC, por lo que debemos elegir el modo PC al construir. La

escena de impresión generalmente se encuentra en la página de visualización. Nuestra página de visualización se puede completar usando un contenedor de formulario. Elegimos ver el escena del contenedor de formulario. Para la conveniencia de la demostración, necesitamos establecer una ID

y la otra es establecer el área de impresión. El principio de la biblioteca html2canvas es tomar una foto de la página. Qué área es más adecuada para nosotros para tomar?

Debido a los diferentes tamaños de las pantallas de las computadoras, algunas son más anchas y otras más angostas, por lo que establecemos el ancho de nuestra área de impresión en 1080

Para lograr este efecto, configuramos dos capas de contenedores ordinarios como diseño para el contenedor de formulario. Para la primera capa, hacemos que la página llene la pantalla, y la segunda capa es para establecer un ancho fijo en el área de impresión.

En la primera capa, configuramos nuestros elementos internos para que estén dispuestos horizontalmente y centrados.

El contenedor de la segunda capa establece un ancho fijo

3 realizar la impresión

Después de configurar el área de impresión, debemos definir un método para llamar a nuestra biblioteca de terceros

Establecemos un método personalizado para el botón de impresión, llamado imprimir, e

ingresamos el siguiente código en el método de impresión

export default async function({
     
     event, data}) {
    
    
const element = document.querySelector(`#container6`) // 选择到要打印的组件id或者class，转换为canvas，其中 idXXX 表示要打印的元素
  if(!element) {
    
    
    throw new Error('要打印的内容不存在')
  }
  const {
    
     width, height } = element.getBoundingClientRect()
  const canvas = await window.html2canvas(element)

  // 打印
  let winPrint = window.open('', '', `left=0,top=0,width=${
      
      width},height=${
      
      height},toolbar=0,scrollbars=0,status=0`);
  winPrint.document.body.appendChild(canvas);
  winPrint.document.close();
  winPrint.focus();
  winPrint.print();
  winPrint.close();

}

Primero, debe seleccionar el área a imprimir. Estamos configurando el segundo contenedor normal. Debe seleccionar la ID del contenedor.

const element = document.querySelector(`#container6`)

Después de configurar el área de impresión, necesitamos obtener el ancho y la altura del elemento

 const {
    
     width, height } = element.getBoundingClientRect()

Los estudiantes que no están familiarizados con la gramática JS pueden no entender esto muy bien. Esto se llama asignación de deconstrucción. A través de la asignación estructural, el valor de retorno obtenido por el método llamado a la derecha se asigna a las dos variables ancho y alto a la izquierda.

Aquí estamos deconstruyendo objetos, asignando objetos a atributos respectivamente, y si lees la plantilla oficial, también verás la deconstrucción de arreglos.

const canvas = await window.html2canvas(element)

Esta línea de código es equivalente a configurar el elemento de impresión obtenido en nuestro lienzo, y el resto del código es llamar a la función de impresión del navegador.

4 Darse cuenta del efecto

Después de configurar el código, hacemos clic en la función de vista previa y luego hacemos clic en el botón Imprimir para ver el efecto específico

Resumir

Este artículo lleva a todos a darse cuenta de la función de la impresión de formularios. La impresión de formularios debe estar en el entorno de la PC, y el área de impresión debe configurarse correctamente y se llama a la biblioteca html2canvas para realizarla. Los estudiantes que lo necesiten pueden practicarlo de acuerdo con el tutorial