页面导出为图片,打印制定区域

打印

    printPage() {
      var printhtml = document.getElementById("printPage").innerHTML; // 获取打印区域
      var oldhtml = document.innerHTML; // 保存原始内容
      document.body.innerHTML = printhtml; // 赋值打印
      window.print();
      document.body.innerHTML = oldhtml; // 还原页面
      window.location.reload(); // 刷新解决页面无法点击
      return false;
    },

内容导出为图片

// 导入html2canvas库

import html2canvas from "html2canvas";


oupPutImg() {
  var _this = this;
  let element = document.getElementById("printPage");
  html2canvas(element, {
    backgroundColor: "#fff"   //打印图片的背景填充色
  }).then(canvas => {
    let dataURL = canvas.toDataURL("image/png");
    this.saveFile(dataURL, "用户详情");
  });
},
    
saveFile(data, fileName) {
  var save_link = document.createElementNS(
    "http://www.w3.org/1999/xhtml",
    "a"
  ); //创建一个具有指定的命名空间URI和限定名称的元素
  save_link.href = data;
  save_link.download = fileName;
  // 创建
  var event = document.createEvent("MouseEvents");
  // 初始化
  event.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    0,
    null
  );
  save_link.dispatchEvent(event);
}