使⽤html2canvas将页⾯转成图并使⽤⽤canvas2image下
载
之前在⽹上到⼀个⽤ <a> 的 download属性下载的⽅法，确实很简单也很⽅便，但此⽅法不⽀持IE，⽆奈⼜到另⼀⽅法。使⽤html2canvas将页⾯转成图，⽤canvas2image下载
本例使⽤的版本：
html2canvas@1.0.0-alpha.12
canvas2image@1.0.5
安装
npm install html2canvas canvas2image --save
引⼊
import html2canvas from 'html2canvas';
require('./canvas2image.js');
canvas2image.js 需要改动⼀下，以便绑在window上
(function($){
Canvas2Image = function () {
...
}
}
_dataURL 可以⽤来回显，Canvas2Image.saveAsPNG(canvas) 会直接下载。
提供了下⾯⼏种⽅法:
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)
在vue中可以⽤$refs 确定DOM；
backgroundColor: null，此句可使转出的图没有⽩边
methods: {
toImage() {
pdf转htmllet _this = this;
html2canvas(this.$refs.index,{
backgroundColor: null
}).then((canvas) => {
let _dataURL = DataURL("image/png");
// _this.dataURL = _dataURL;
Canvas2Image.saveAsPNG(canvas)
});
},
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。