前端，导出页面为图片组件 |
您所在的位置：网站首页 › 前端页面快速生成图片 › 前端，导出页面为图片组件 |
|
// 导出页面为img
import html2Canvas from "html2canvas";
export default {
install(Vue, options) {
Vue.prototype.getImg = function(e) {
// 如果页面的高度和宽度超过当前屏幕需要指定长度和高度
html2Canvas(this.$refs.exportImgDiv).then(canvas => {
this.isShowScroll = true;
const link = document.createElement("a");
link.href = canvas.toDataURL();
link.setAttribute("download", "test.png");
link.style.display = "none";
document.body.appendChild(link);
link.click();
});
};
}
};
复制即用 import vueToImg from '（组件地址）' // 全局引入 Vue.use(vueToImg) // 全局注册 使用 // 设置ref为exportImgDiv xxxxxxxxxxxx // 调用方法 导出图片 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |