Solution d'implémentation du client pur et du serveur pur pour HTML à PDF

L'utilisateur remplit le formulaire et clique pour enregistrer, et peut télécharger directement le document PDF.

Idées

Google Chrome a développé sa propre fonctionnalité chromée sans tête en 2017 et a lancé des marionnettiste en même temps. Il peut être compris comme un navigateur qui n'a pas d'interface mais qui peut compléter les fonctionnalités fonctionnelles du serveur.

Nous pouvons donc démarrer le navigateur de marionnet-marin sur le serveur, ouvrir l'URL de destination et utiliser la fonction de conversion fournie par le navigateur Chrome pour convertir HTML en PDF.

Tout d'abord, vous devez installer des marionnets. Il peut y avoir des erreurs dans l'installation du NPM. Il est préférable d'utiliser l'image CNPM Taobao pour l'installer.

Entrez les dépendances d'installation cnpm i puppeteer -S .

Pour créer un fichier JS, il vous suffit d'ouvrir l'URL avec le navigateur de marionnettiste et d'enregistrer le PDF.

 // html2pdf.jsconst puppeteer = require ('puppeteer'); (function async () {// Démarrer le service de service de service = Await puppeteer.launch (); // Ouvrez le tab const page = Await Browser.NewPage (); // allez à l'adresse Await page.goto ('https://koa.bootcss.com/#context');

Entrez ensuite node html2pdf.js sur la console pour démarrer le service.

Bien sûr, Module.Export peut également exporter la méthode du module en fonction de la logique métier.

défaut

Impossible d'enregistrer des données dynamiques sur le formulaire

Puisqu'il s'agit d'une page de demande du serveur, si l'entrée de l'utilisateur n'est pas enregistrée sur l'adresse de demande, le PDF de découpe sera l'état initial où la page n'a pas été remplie.

En d'autres termes, il ne peut convertir les pages statiques que parce que nos besoins ont beaucoup d'entrée utilisateur, alors passez.

Idées

• À l'aide de html2Canvas, entrez le nœud Dom qui doit être converti et traversez-le et convertissez-le en toile en toile
• Convertissez le canevas Canvas en une image Base64, utilisez JSPDF pour créer un fichier PDF et insérez l'image en PDF.

défaut

distorsion.

Nous pouvons clairement constater que comme il est similaire à l'insertion de la capture d'écran dans un PDF sur une page, la résolution et la configuration de la page sont susceptibles d'affecter la qualité de l'image de sortie.

En même temps, car il s'agit d'une capture d'écran, le lien de page et d'autres fonctions peuvent être perdus.

Coupure de texte

Lorsque le canevas Canvas est supérieur à une taille de page de PDF, la sortie sera erronée. Pour le moment, nous devons déterminer si la toile en toile dépasse la taille A4. S'il dépasse la toile, segmentez la toile et insérez-la dans une autre page.

Le problème revient en ce moment. Puisqu'il partage l'image, il est probable que l'image ou le texte soit tronqué à partir de la moitié, car nous ne pouvons pas analyser la structure de l'élément interne de la toile.

Code de base

Nos besoins n'ont pas de photos et de liens, donc le problème de distorsion a peu d'impact sur nous. Dans le même temps, notre forme se compose de plusieurs éléments de longueur égale en double, et ces éléments sont très courts et ne dépasseront pas un morceau de papier A4 (bien que cela ne soit pas rigoureux, si nécessaire, vous pouvez obtenir la largeur et la hauteur de l'élément DOM et coupé en fonction de la hauteur de l'élément DOM).

Je prévois donc de diviser directement la toile en fonction de l'élément et d'enregistrer chaque élément sur une page de papier A4.

Plusieurs approches de base doivent être comprises avant de commencer:

html2canvas

 // DOM est le nœud Dom à convertir html2Canvas (Dom, {backgroundColor: #ffffff, largeur: largeur, hauteur: hauteur, échelle: 2, permets: true,}). Puis ((canvas) => {// Canvas est la canevas après une conversion réussie})

jspdf

 // Créer une instance Soit PDF = new JSPDF ('', 'PT', 'A4'); // Ajouter l'image au fichier PDF // Le premier paramètre est le format de fichier (base64) à insérer, le second est le format de fichier // Les troisième et quatrième sont les coordonnées dans le coin supérieur gauche de l'image, et les deux dernières sont la largeur et la hauteur de l'image après insertion de l'image Pdf.addimage (image, 'jpeg', 10,10, hauteur, largeur); // Ajouter une nouvelle page pdf.addpage () // Enregistrez le fichier pdf pdf.save ()

toile

 // Canvas est l'image à découper // sx, sy, les coordonnées pour commencer la culture // swidth et sheight sont la largeur et la hauteur de la recadrage // dx et dy sont les coordonnées insérées dans l'image après le recadrage // Swidth, Sheight est la largeur et la hauteur de l'image après Cropping Cx sheight);

 / ** * @Description: Form au fichier pdf * @return: pdf * / onSubmit () {// c'est le formulaire que je veux convertir, il existe de nombreuses tables similaires. // Obtenez la largeur et la hauteur de l'élément LET Largeur = form.getBoundingClientRect (). Largeur; LET HAGED = form.getBoundingClientRect (). Hauteur; html2Canvas (formulaire, {backgroundColor: #ffffff, largeur: largeur, hauteur: hauteur, échelle: 2, allowTaint: true,}). puis ((canvas) => {let pdf = new jspdf ('', 'pt', 'a4'); // perd la coupe d'image); // Traversé la liste Canvas et ajouter une image par page canvasList.ForEach ((item, index) => {// converti le format d'image en base64 let itemMage = item.todataurl ('Image / jpeg', 1.0); // Réserver 10px marge, la largeur du papier A4 est de 595px sur une 72-Resolution Monitor 10-Resolution pdf.addimage (itemImage, 'jpeg', 10,10,575.28 575.28 / item.width * item.height); pdf.save ('test.pdf');})}, / ** * @Description: Cut Canvas * @param {numéro} num de tranches * @param {canvas} canvas * @return {Array} canvas list * / SplitCanvas (Canvas, num) {LET HEEGHT = Canvas.Height, witretth = canvas.width; Soit chunkheight = height / num; // la hauteur de chaque tranche Soit Chunklist = []; // stockant le toile de résultat pour (Soit i = 0; i <hauteur; i + = chunkheight) {// initialiser la position de la boîte de recadrage. // Créer un nœud Canvas LET LET CanVasItem = Document.CreateElement (Canvas); // Initialisez la taille du canevas canvasitem.height = ChunkHeight; canvasitem.width = largeur; LET CXT = CanVasItem.getContext (2D); // a mis l'image recadrée au nouveau nœud de toile CXT.Drawimage (Canvas, Sx, Sy, Swidth, Sheight, Dx, Dy, Swidth, Sheight); ChunkList.push (Canvasitem); } return chunklist;},

La page après le formulaire enregistré

L'effet de la conversion en PDF

Ceci est l'article sur le client pur et la solution d'implémentation du serveur pur de HTML à PDF. Pour plus de contenu HTML à PDF plus lié, veuillez rechercher des articles précédents de Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!