Use html2canvas para convertir la página en una imagen y descárguela usando canvas2image

Anteriormente encontré un método para descargar usando el atributo de descarga de <a> en Internet. De hecho, es muy simple y conveniente, pero este método no es compatible con IE, por lo que no tuve más remedio que buscar otro método.

La versión utilizada en este ejemplo:

• [email protected]
• [email protected]

Instalar

 npm instala html2canvas canvas2image --save

introducir

 importar html2canvas desde 'html2canvas';require('./canvas2image.js');

canvas2image.js debe modificarse para poder vincularlo a la ventana

 (función ($) { Canvas2Image = función () { ... }}

_dataURL se puede utilizar para hacer eco, Canvas2Image.saveAsPNG(canvas) lo descargará directamente.

Canvas2Image proporciona los siguientes métodos:

 Canvas2Image.saveAsImage(canvasObj, ancho, alto, tipo)Canvas2Image.saveAsPNG(canvasObj, ancho, alto)Canvas2Image.saveAsJPEG(canvasObj, ancho, alto)Canvas2Image.saveAsGIF(canvasObj, ancho, alto)Canvas2Image.saveAsBMP(canvasObj, ancho, alto)Canvas2Image.convertToImage(canvasObj, ancho, alto, tipo)Canvas2Image.convertToPNG(canvasObj, ancho, alto)Canvas2Image.convertToJPEG(canvasObj, ancho, alto)Canvas2Image.convertToGIF(canvasObj, ancho, alto)Canvas2Image.convertToBMP(canvasObj, ancho, altura)

En vue, puedes usar $refs para determinar el DOM;

backgroundColor: nulo, esta oración puede hacer que la imagen transferida no tenga bordes blancos

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

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.