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

最新推荐文章于 2024-07-10 11:19:41 发布

转载最新推荐文章于 2024-07-10 11:19:41 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lakemonster/p/10557802.html

文章标签：

#xhtml

博客介绍了内容的打印以及将内容导出为图片的相关操作，转载自https://www.cnblogs.com/lakemonster/p/10557802.html 。

打印

    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);
}

转载于:https://www.cnblogs.com/lakemonster/p/10557802.html