1、安装插件
cnpm install html2canvas
2、在页面内引用插件
import html2canvas from “html2canvas”
3、使用插件
toImage(){
this.$Loading.start();
var scrollHeight = $('#glcontent').prop("scrollHeight");
var height = $('#glcontent').height();
var width = $('#glcontent').width();
html2canvas(this.$refs.imageWrapper,
{ type: 'view',
height: scrollHeight + 50,
width: width,
windowHeight: scrollHeight + height + 50,
}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
this.imgUrl = dataURL;
let url = dataURL.split(",")[1];
if(url != ''){
this.$Loading.finish();
let gwq = GWQUtil.getObject();
GWQUtil.createQrCode(gwq, url, '一体机');
}
}).catch(error=>{
this.$Loading.error();
alert(error)
});
},
4、遇到的问题
如果页面有滚动条,滚动条部分里的内容解不出来,需要加windowHeight