Utiliser le low-code pour réaliser la fonction d'impression de formulaire

Dans nos scénarios de développement quotidiens, l'impression de formulaires est un scénario relativement courant. Le Wi-Fi lui-même n'a pas de fonction d'impression. Nous avons besoin d'une bibliothèque tierce pour réaliser l'impression.

1 Présentation des bibliothèques tierces

Si vous avez besoin d'introduire une bibliothèque tierce dans la micro-construction, vous devez ouvrir l'application dans laquelle vous vous trouvez, accéder au dernier menu dans la barre latérale de l'éditeur d'application et saisir l'adresse de notre bibliothèque tierce

.

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

Assurez-vous que l'adresse est accessible lors de l'importation de la bibliothèque

Les amis qui connaissent le développement frontal peuvent être plus habitués à utiliser npm pour l'installation. Microbuild ne prend pas en charge la forme de npm et ne peut importer que des js externes

2 Construire la page

Lorsque nous imprimons, nous l'utilisons généralement côté PC, nous devons donc choisir le mode PC lors de la construction. La

scène d'impression se trouve généralement sur la page de visualisation. Notre page de visualisation peut être complétée à l'aide d'un conteneur de formulaire. Nous choisissons de visualiser le scène du conteneur de formulaire. Pour la commodité de la démonstration, nous devons définir un identifiant

et l'autre consiste à définir la zone d'impression. Le principe de la bibliothèque html2canvas est de prendre une photo de la page. Quelle zone est la plus appropriée pour nous prendre?

En raison des différentes tailles d'écrans d'ordinateur, certains sont plus larges et d'autres plus étroits, nous avons donc défini la largeur de notre zone d'impression sur 1080

Afin d'obtenir cet effet, nous avons défini deux couches de conteneurs ordinaires comme mise en page pour le conteneur de formulaire. Pour la première couche, nous faisons en sorte que la page remplisse l'écran, et la deuxième couche consiste à définir une largeur fixe dans la zone d'impression.

Dans la première couche, nous définissons nos éléments internes pour qu'ils soient disposés horizontalement et centrés

Le deuxième conteneur de couches définit une largeur fixe

3 Réaliser l'impression

Une fois la zone d'impression définie, nous devons définir une méthode pour appeler notre bibliothèque tierce

Nous définissons une méthode personnalisée pour le bouton d'impression, nommée print, et

entrons le code suivant dans la méthode d'impression

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();

}

Tout d'abord, vous devez sélectionner la zone à imprimer. Nous mettons en place le deuxième conteneur normal. Vous devez sélectionner l'ID du conteneur.

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

Une fois la zone d'impression définie, nous devons obtenir la largeur et la hauteur de l'élément

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

Les étudiants qui ne sont pas familiers avec la grammaire JS peuvent ne pas très bien comprendre cela. C'est ce qu'on appelle l'affectation de déconstruction. Grâce à l'affectation structurelle, la valeur de retour obtenue par la méthode appelée à droite est affectée aux deux variables largeur et hauteur à gauche.

Ici, nous déconstruisons des objets, attribuons respectivement des objets à des attributs, et si vous lisez le modèle officiel, vous verrez également la déconstruction de tableaux

const canvas = await window.html2canvas(element)

Cette ligne de code équivaut à définir l'élément d'impression obtenu sur notre canevas, et le reste du code consiste à appeler la fonction d'impression du navigateur.

4 Réalisez l'effet

Une fois le code défini, nous cliquons sur la fonction d'aperçu, puis sur le bouton d'impression pour voir l'effet spécifique

Résumer

Cet article amène tout le monde à réaliser la fonction de l'impression de formulaires. L'impression de formulaires doit être dans l'environnement PC, et la zone d'impression doit être définie correctement et la bibliothèque html2canvas doit être appelée pour la réaliser. Les étudiants qui en ont besoin peuvent s'exercer selon au tutoriel.