【无标题】

import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
function TpWatermark(CON, H, W, R, C, S, O, idStr) {
  // 判断水印是否存在，如果存在，那么不执行
  if (document.getElementById("tp-watermark") != null) {
    return;
  }
  if (document.getElementById("footer") != null) {
    return;
  }
  var TpLine = parseInt(document.getElementById(idStr).clientWidth / W) * 2; // 一行显示几列
  var StrLine = "";
  for (var i = 0; i < TpLine; i++) {
    StrLine +=
      '<span style="display: inline-block; line-height:' +
      H +
      "px; width:" +
      W +
      "px; text-align: center; transform:rotate(" +
      R +
      "deg); color:" +
      C +
      "; font-size:" +
      S +
      "px; opacity:" +
      O +
      ';">' +
      CON +
      "</span>";
  }
  var DivLine = document.createElement("div");
  DivLine.innerHTML = StrLine;

  var TpColumn = parseInt(document.getElementById(idStr).clientHeight / H) * 2; // 一列显示几行
  var StrColumn = "";
  for (var i = 0; i < TpColumn; i++) {
    StrColumn +=
      '<div style="white-space: nowrap;">' + DivLine.innerHTML + "</div>";
  }
  var DivLayer = document.createElement("div");
  DivLayer.innerHTML = StrColumn;
  DivLayer.id = "tp-watermark"; // 给水印盒子添加类名
  DivLayer.style.position = "fixed";
  DivLayer.style.top = "10px"; // 整体水印距离顶部距离
  DivLayer.style.left = "-100px"; // 改变整体水印的left值
  DivLayer.style.zIndex = "99999"; // 水印页面层级
  DivLayer.style.pointerEvents = "none";

  document.getElementById(idStr).appendChild(DivLayer); // 到页面中
  var footerColumn = ` <footer class="el-login-footer">
  <span
    >Copyright © 2022 **********版权所有 Powered by
    iMotorlinx *ICP备******号-2</span
  >
</footer>`;
  var DivFooter = document.createElement("div");
  DivFooter.id = "footer";
  DivFooter.innerHTML = footerColumn;
  document.getElementById(idStr).appendChild(DivFooter); // 到页面中
}
// 移除水印方法
function RemoveTpWatermark(idStr) {
  // 判断水印是否存在，如果存在，那么执行
  if (document.getElementById("tp-watermark") == null) {
    return;
  }
  if (document.getElementById("footer") == null) {
    return;
  }
  console.log(document.getElementById(idStr));

  document
    .getElementById(idStr)
    .removeChild(document.getElementById("tp-watermark"));
  document.getElementById(idStr).removeChild(document.getElementById("footer"));
}

export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function (idStr, title) {
      var userName = `${this.$store.state.user.name} ${this.$store.state.user.nickName}`;
      // var wmName = userName + `${this.parseTime(new Date().getTime(),'')}`;
      var wmName = userName;
      // var pdfTitle = document.getElementById('pdfTitle');
      // pdfTitle.style.display = "block";

      TpWatermark(wmName, "500", "700", "-30", "grey", "50", "0.1", idStr);
      // 获取dom高度、宽度
      var shareContent = document.getElementById(idStr);
      //修改背景色，否则会有黑边，不太美观
      shareContent.style.cssText = "background: #fff";
      var width = shareContent.offsetWidth / 4;
      var height = shareContent.offsetHeight / 4;
      let _this = this;
      // eslint-disable-next-line
      html2Canvas(document.getElementById(idStr), {
        allowTaint: true, // 开启跨域
        // background: '#fff'
      }).then(function (canvas) {
        var context = canvas.getContext("2d");
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var img = new Image();
        img.src = pageData;
        img.onload = function () {
          var filename = title + ".pdf";
          // 获取dom高度、宽度
          img.width = img.width / 2;
          img.height = img.height / 2;
          img.style.transform = "scale(0.5)";
          if (width > height) {
            // 此可以根据打印的大小进行自动调节
            // eslint-disable-next-line
            // if (idStr == "interestrate") {
            //   var pdf = new JsPDF("l", "mm", [width * 0.505, height * 0.545]);
            // } else {
            //   var pdf = new JsPDF("l", "mm", [width * 0.505, height * 0.545]);
            // }
            var pdf = new JsPDF("l", "mm", [width * 0.505, height * 0.545]);
          } else {
            // eslint-disable-next-line
            var pdf = new JsPDF("p", "mm", [width * 0.505, height * 0.545]);
          }
          pdf.addImage(pageData, "jpeg", 0, 0, width * 0.505, height * 0.545);
          pdf.save(filename);
        };
      });
      setTimeout(() => {
        RemoveTpWatermark(idStr);
      }, 0);
    };
  },
};