Use html2canvas para converter a página em uma imagem e baixe-a usando canvas2image

Anteriormente, encontrei um método de download na Internet usando o atributo de download de <a>. É realmente muito simples e conveniente, mas esse método não oferece suporte ao IE, então não tive escolha a não ser encontrar outro método.

A versão usada neste exemplo:

• [email protected]
• [email protected]

Instalar

 npm instalar html2canvas canvas2image --save

introduzir

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

canvas2image.js precisa ser modificado para que possa ser vinculado à janela

 (função($){ Canvas2Image = função () { ... }}

_dataURL pode ser usado para ecoar, Canvas2Image.saveAsPNG(canvas) fará o download diretamente.

Canvas2Image fornece os seguintes métodos:

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

Na verdade, você pode usar $refs para determinar o DOM;

backgroundColor: null, esta frase pode fazer com que a imagem transferida não tenha borda branca

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

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.