以前在網上找到一個用 <a> 的 download屬性下載的方法,確實很簡單也很方便,但此方法不支持IE,無奈又找到另外一方法。html
html2canvas@1.0.0-alpha.12
canvas2image@1.0.5
安裝vue
npm install html2canvas canvas2image --save
引入git
import html2canvas from 'html2canvas'; require('./canvas2image.js');
canvas2image.js 須要改動一下,以便綁在window上github
(function($){ Canvas2Image = function () { ... } }
_dataURL 能夠用來回顯,Canvas2Image.saveAsPNG(canvas) 會直接下載。
Canvas2Image提供了下面幾種方法:npm
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) Canvas2Image.convertToImage(canvasObj, width, height, type) Canvas2Image.convertToPNG(canvasObj, width, height) Canvas2Image.convertToJPEG(canvasObj, width, height) Canvas2Image.convertToGIF(canvasObj, width, height) Canvas2Image.convertToBMP(canvasObj, width, height)
在vue中能夠用$refs 肯定DOM;
backgroundColor: null,此句可以使轉出的圖沒有白邊canvas
methods: { toImage() { let _this = this; html2canvas(this.$refs.index,{ backgroundColor: null }).then((canvas) => { let _dataURL = canvas.toDataURL("image/png"); // _this.dataURL = _dataURL; Canvas2Image.saveAsPNG(canvas) }); },