Utilisez html2canvas pour convertir la page en image et téléchargez-la à l'aide de canvas2image

J'ai déjà trouvé sur Internet une méthode pour télécharger en utilisant l'attribut download de <a>. C'est en effet très simple et pratique, mais cette méthode ne prend pas en charge IE, je n'ai donc pas eu d'autre choix que de trouver une autre méthode.

La version utilisée dans cet exemple :

• [email protected]
• [email protected]

Installer

 npm installer html2canvas toile2image --save

introduire

 importer html2canvas depuis 'html2canvas';require('./canvas2image.js');

canvas2image.js doit être modifié pour pouvoir être lié à la fenêtre

 (fonction($){ Canvas2Image = fonction () { ... }}

_dataURL peut être utilisé pour faire écho, Canvas2Image.saveAsPNG(canvas) le téléchargera directement.

Canvas2Image fournit les méthodes suivantes :

 Canvas2Image.saveAsImage(canvasObj, largeur, hauteur, type)Canvas2Image.saveAsPNG(canvasObj, largeur, hauteur)Canvas2Image.saveAsJPEG(canvasObj, largeur, hauteur)Canvas2Image.saveAsGIF(canvasObj, largeur, hauteur)Canvas2Image.saveAsBMP(canvasObj, largeur, hauteur)Canvas2Image.convertToImage(canvasObj, largeur, hauteur, type)Canvas2Image.convertToPNG(canvasObj, largeur, hauteur)Canvas2Image.convertToJPEG(canvasObj, largeur, hauteur)Canvas2Image.convertToGIF(canvasObj, largeur, hauteur)Canvas2Image.convertToBMP(canvasObj, largeur, hauteur)

En vue, vous pouvez utiliser $refs pour déterminer le DOM ;

backgroundColor : null, cette phrase peut faire en sorte que l'image transférée n'ait pas de bordure blanche

 méthodes : { toImage() { let _this = this; html2canvas(this.$refs.index,{ backgroundColor: null }).then((canvas) => { let _dataURL = canvas.toDataURL(image/png); // _this.dataURL = _dataURL; Canvas2Image.saveAsPNG(canvas) });

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.