html2canvas를 사용하여 페이지를 이미지로 변환하고 canvas2image를 사용하여 다운로드합니다.

예전에 인터넷에서 <a>의 다운로드 속성을 이용해서 다운로드하는 방법을 찾았는데 정말 간편하고 편리하지만 이 방법은 IE를 지원하지 않아서 다른 방법을 찾을 수밖에 없었습니다.

이 예에 사용된 버전은 다음과 같습니다.

• [email protected]
• [email protected]

설치하다

 npm 설치 html2canvas canvas2image --저장

소개하다

 'html2canvas';require('./canvas2image.js')에서 html2canvas를 가져옵니다.

canvas2image.js를 창에 연결할 수 있도록 수정해야 합니다.

 (함수($){ Canvas2Image = 함수 () { ... }}

_dataURL을 사용하여 에코할 수 있으며 Canvas2Image.saveAsPNG(canvas)가 직접 다운로드합니다.

Canvas2Image는 다음 메서드를 제공합니다.

 Canvas2Image.saveAsImage(canvasObj, 너비, 높이, 유형)Canvas2Image.saveAsPNG(canvasObj, 너비, 높이)Canvas2Image.saveAsJPEG(canvasObj, 너비, 높이)Canvas2Image.saveAsGIF(canvasObj, 너비, 높이)Canvas2Image.saveAsBMP(canvasObj, 너비, height)Canvas2Image.convertToImage(canvasObj, 너비, 높이, 유형)Canvas2Image.convertToPNG(canvasObj, 너비, 높이)Canvas2Image.convertToJPEG(canvasObj, 너비, 높이)Canvas2Image.convertToGIF(canvasObj, 너비, 높이)Canvas2Image.convertToBMP(canvasObj, 너비, 키)

vue에서는 $refs를 사용하여 DOM을 결정할 수 있습니다.

backgroundColor: null, 이 문장은 전송된 이미지에 흰색 테두리가 없게 만들 수 있습니다.

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

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.