打印组件

Dec 21, 2021

打印element.ui的table表单

1，首先给需要打印的元素一个id
image-20221021222503430
2，在点击打印按钮的时候调用方法，在方法中传入id
image-20221021222533133
3，代码会拼接成一个新的页面，然后打开一个新的浏览器标签，预览打印，需要调整的地方，可以在表单的样式中调整。假如说不想打印表单的最后一列“操作”，可以复制一个新的表单，然后隐藏，给它id，把“操作”这列的代码删掉，打印出来就不会有“操作”这一列了。具体的可以看下代码。

   function PrintForm(id) {
    // 空页面
    let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
    // 定义element-ui table组件的样式
    const tabStyle = `<style>
        table{width:150%;display:table-cell!important;box-sizing:border-box;table-layout:auto!important;}
        .el-table__header,.el-table__body,.el-table__footer{width:100%!important;border-collapse: collapse;text-align:center;}
        table,table tr th, table tr td { border:1px solid #ddd;color:#606266;word-wrap:break-word}
        table tr th,table tr td{padding:5 10px;word-wrap:break-word }
        .el-table__body, tr td .cell{width:100%!important}
        .el-table th.gutter{display: none;}
        .el-table colgroup.gutter{display: none;}
        </style><body>`;
    let content = "";
    // 获取名为传入id的 dom元素内的内容
    const html = document.getElementById(id).innerHTML;
    console.log(html)
    // 新建一个 DOM
    const div = document.createElement("div");
    const printDOMID = "printDOMElement";
    div.id = printDOMID;
    div.innerHTML = html;
    // 提取第一个表格的内容 即表头
    const ths = div.querySelectorAll(".el-table__header-wrapper th");
    const ThsTextArry = [];
    for (let i = 0, len = ths.length; i < len; i++) {
      if (ths[i].innerText !== "") ThsTextArry.push(ths[i].innerText);
    }
    // 删除多余的表头
    div.querySelector(".hidden-columns").remove();
    // 第一个表格的内容提取出来后已经没用了 删掉
    div.querySelector(".el-table__header-wrapper").remove();
    // 将第一个表格的内容插入到第二个表格
    let newHTML = "<tr>";
    for (let i = 0, len = ThsTextArry.length; i < len; i++) {
      newHTML +=
        '<td style="text-align: center; font-weight: bold">' +
        ThsTextArry[i] +
        "</td>";
    }
    newHTML += "</tr>";
    div.querySelector(".el-table__body-wrapper table").insertAdjacentHTML("afterbegin", newHTML);
    let str = div.querySelector(".el-table__body-wrapper").innerHTML
    console.log(str)
    // 拼接空页面+style样式+dom内容
    content = content + str;
    printStr = printStr + tabStyle + content + "</body></html>";
    // 打开新页面
    let pWin = window.open("_blank");
    // 将内容赋值到新页面
    pWin.document.write(printStr);
    // 使用setTimeout，等页面dom元素渲染完成后再打印。
    setTimeout(() => {
      pWin.print(); // 调用打印功能。
      pWin.close(); // 关闭 打印创建的当前页面
    }, 100);
  }

Back

To Top