Konvertieren Sie die Seite mit html2canvas in ein Bild und laden Sie es mit canvas2image herunter

Ich habe zuvor eine Methode zum Herunterladen mithilfe des Download-Attributs von <a> im Internet gefunden. Diese ist zwar sehr einfach und bequem, aber diese Methode unterstützt den IE nicht, sodass ich keine andere Wahl hatte, als eine andere Methode zu finden.

Die in diesem Beispiel verwendete Version:

• [email protected]
• [email protected]

Installieren

 npm install html2canvas canvas2image --save

einführen

 html2canvas aus 'html2canvas' importieren;require('./canvas2image.js');

canvas2image.js muss geändert werden, damit es an das Fenster gebunden werden kann

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

_dataURL kann zum Echo verwendet werden, Canvas2Image.saveAsPNG(canvas) lädt es direkt herunter.

Canvas2Image bietet die folgenden Methoden:

 Canvas2Image.saveAsImage(canvasObj, width, height, type)Canvas2Image.saveAsPNG(canvasObj, width, height)Canvas2Image.saveAsJPEG(canvasObj, width, height)Canvas2Image.saveAsGIF(canvasObj, width, height)Canvas2Image.saveAsBMP(canvasObj, width, height) height)Canvas2Image.convertToImage(canvasObj, width, height, type)Canvas2Image.convertToPNG(canvasObj, width, height)Canvas2Image.convertToJPEG(canvasObj, width, height)Canvas2Image.convertToGIF(canvasObj, width, height)Canvas2Image.convertToBMP(canvasObj, Breite, Höhe)

In Vue können Sie $refs verwenden, um das DOM zu bestimmen;

Hintergrundfarbe: null, dieser Satz kann dazu führen, dass das übertragene Bild keine weißen Ränder aufweist

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.