前端，导出页面为图片组件

// 导出页面为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) // 全局注册

使用

<div ref="exportImgDiv"> // 设置ref为exportImgDiv

<div>xxxxxxxxxxxx</div>

</div>

<button @click="getImg()"> // 调用方法

导出图片

</button>