printjs打印el-table,echarts等打印不全，异

echarts无法打印解决

修改print.js的getHtml，增加对canvas的处理，将echarts转为图片：

 getHtml: function () {
        var inputs = document.querySelectorAll('input');
        var textareas = document.querySelectorAll('textarea');
        var selects = document.querySelectorAll('select');
        var canvass = document.querySelectorAll('canvas');

        for (var k = 0; k < inputs.length; k++) {
            if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
                if (inputs[k].checked == true) {
                    inputs[k].setAttribute('checked', "checked")
                } else {
                    inputs[k].removeAttribute('checked')
                }
            } else if (inputs[k].type == "text") {
                inputs[k].setAttribute('value', inputs[k].value)
            } else {
                inputs[k].setAttribute('value', inputs[k].value)
            }
        }

        for (var k2 = 0; k2 < textareas.length; k2++) {
            if (textareas[k2].type == 'textarea') {
                textareas[k2].innerHTML = textareas[k2].value
            }
        }

        for (var k3 = 0; k3 < selects.length; k3++) {
            if (selects[k3].type == 'select-one') {
                var child = selects[k3].children;
                for (var i in child) {
                    if (child[i].tagName == 'OPTION') {
                        if (child[i].selected == true) {
                            child[i].setAttribute('selected', "selected")
                        } else {
                            child[i].removeAttribute('selected')
                        }
                    }
                }
            }
        }

        //canvass echars图表转为图片
        for (var k4 = 0; k4 < canvass.length; k4++) {
            var imageURL = canvass[k4].toDataURL("image/png");
            var img = document.createElement("img");
            img.src = imageURL;
            img.setAttribute('style', 'max-width: 100%;');
            img.className = 'isNeedRemove'
            canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
        }
    },

el-table打印不全

image.png

方法一：修改print.js的getHtml方法，增加对表格的宽度处理

getHtml: function () {
    var inputs = document.querySelectorAll("input");
    var textareas = document.querySelectorAll("textarea");
    var selects = document.querySelectorAll("select");
    let cells = document.querySelectorAll(".cell");

    for (var k = 0; k < inputs.length; k++) {
      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
        if (inputs[k].checked == true) {
          inputs[k].setAttribute("checked", "checked");
        } else {
          inputs[k].removeAttribute("checked");
        }
      } else if (inputs[k].type == "text") {
        inputs[k].setAttribute("value", inputs[k].value);
      } else {
        inputs[k].setAttribute("value", inputs[k].value);
      }
    }

    for (var k2 = 0; k2 < textareas.length; k2++) {
      if (textareas[k2].type == "textarea") {
        textareas[k2].innerHTML = textareas[k2].value;
      }
    }

    for (var k3 = 0; k3 < selects.length; k3++) {
      if (selects[k3].type == "select-one") {
        var child = selects[k3].children;
        for (var i in child) {
          if (child[i].tagName == "OPTION") {
            if (child[i].selected == true) {
              child[i].setAttribute("selected", "selected");
            } else {
              child[i].removeAttribute("selected");
            }
          }
        }
      }
    }

    const tableNode = document.querySelectorAll(
      ".el-table__header,.el-table__body"
    );
    console.log(tableNode);
    //el-table 打印预览的时候，宽度占满
    for (let k6 = 0; k6 < tableNode.length; k6++) {
      const tableItem = tableNode[k6];
      tableItem.style.width = "100%";
    }

    return this.dom.outerHTML;
  },  

image.png

方法二：将el-table改为table（虽然麻烦但是好用）

利用table分页可以让行不被截断且每一页都有表头
参考如下链接：
https://www.jianshu.com/p/4d90efbae014

方法三：结合html2Canvas将打印的页面转为图片

这条同样可以解决echarts不能打印问题，算是万能之法了吧，相对前面几种方式赶紧这个方法最简单，打印效果也比较理想。

1、首先需要安装html2canvas 和print-js 插件并引入，配置请参考文档：https://github.com/niklasvh/html2canvas
2、写一个打印公共方法：

//html转图片打印（解决element table打印不全的问题）
import html2canvas from "html2canvas";
import printJS from "print-js";

/**
 * html转图片
 * @param printContent
 * @param callback
 */
export const html2Canvas = (printContent, callback) => {
  // 获取dom 宽度 高度
  const width = printContent.clientWidth;
  const height = printContent.clientHeight;
  // 创建一个canvas节点
  const canvas = document.createElement("canvas");

  const scale = 4; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
  canvas.width = width * scale; // 定义canvas 宽度 * 缩放
  canvas.height = height * scale; // 定义canvas高度 *缩放
  canvas.style.width = width * scale + "px";
  canvas.style.height = height * scale + "px";
  canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale

  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
  const scrollLeft =
    document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度

  html2canvas(printContent, {
    canvas,
    backgroundColor: null,
    useCORS: true,
    windowHeight: document.body.scrollHeight,
    scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
    scrollY: -scrollTop
    //background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
  })
    .then(canvas => {
      const url = canvas.toDataURL("image/png");
      //console.log("canvas url :" + url);
      callback({ url: url });
    })
    .catch(err => {
      console.error(err);
    });
};

/**
 * 用printJs打印图片
 * @param url
 * @param callback
 */
export const printImg = (url, callback) => {
  printJS({
    printable: url,
    type: "image",
    documentTitle: "", // 标题
    style: "@page{size:auto;margin: 1cm ;}", // 去除页眉页脚
    onStart: () => {
      console.log("打印开始");
    },
    onEnd: () => {
      console.log("打印完成");
    }
  });
};

/**
 * html转图片打印
 * @param dom
 * @param callback
 */
export const html2CanvasPrint = (dom, callback) => {
  //1、html转图片
  html2Canvas(dom, canvasRes => {
    //2、打印图片
    printImg(canvasRes.url, callback);
  });
};

3、调用方法：

html2Canvas(this.$refs.printDom, res => {
    this.printDomUrl = res.url;
    printImg(res.url, printRes => {});
});