实现el-table打印功能,样式对齐,去除滚动条

实现el-table打印功能,样式对齐,去除滚动条

复制代码
// 整个页面打印
function printTable(id) {
  // let domId = '#js_index'
  // if (id) {
  //   domId = `#${ id }`;
  // }
  // let wpt = document.querySelector(domId);
  // let newContent = wpt.innerHTML;
  // let oldContent = document.body.innerHTML;
  // document.body.innerHTML = newContent;
  // window.print(); //打印方法
  // history.go(0);
  // document.body.innerHTML = oldContent;

  if (id) {
    // 获取打印DOM
    let el = document.getElementById(id);
    // 当前页面样式
    let headDom = document.getElementsByTagName("head")[0];
    // 创建iframe
    let iframe = document.createElement("iframe");
    // 设置iframe样式
    iframe.setAttribute("id", id);
    iframe.setAttribute(
      "style",
      "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
    );
    // 在页面插入iframe
    document.body.appendChild(iframe);
    // 获取iframe内的html
    let doc = iframe.contentWindow.document;

    // 经需要打印的DOM插入iframe
    let printMain = document.createElement("div");
    printMain.setAttribute("id", id);
    printMain.innerHTML = el.innerHTML;
    doc.body.appendChild(printMain);
    // 设置iframe内的header,添加样式文件
    setTimeout(() => {
      doc.getElementsByTagName("head")[0].innerHTML = headDom.innerHTML;

      const table = doc.querySelectorAll('.el-table__header,.el-table__body');
      const table1 = doc.querySelectorAll('.el-table');
      const table2 = doc.querySelectorAll('.el-table__body-wrapper');
      for (let i = 0; i < table2.length; i++) {
        const tableItem = table2[i];
        console.log(tableItem);
        tableItem.style.maxHeight = 'unset';
      }
      for (let i = 0; i < table1.length; i++) {
        const tableItem = table1[i];
        console.log(tableItem);
        tableItem.style.maxHeight = 'unset';
      }
      setTimeout(() => {
        //el-table 打印不全的问题
        for (let i = 0; i < table.length; i++) {
          const tableItem = table[i];
          console.log(table1);
          tableItem.style.width = '100%';
          const child = tableItem.childNodes;
          for (let j = 0; j < child.length; j++) {
            const element = child[j];
            if (element.localName == 'colgroup') {
              element.innerHTML = '';
            }
          }
        }
        setTimeout(function () {
          iframe.contentWindow.focus();
          iframe.contentWindow.print();
          // 关闭iframe
          doc.close();
          document.body.removeChild(iframe);
        }, 1000);
      }, 1000)
    }, 0)
  } else {
    window.print(); //打印方法
  }
}
相关推荐
开开心心就好2 小时前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
郝学胜-神的一滴7 小时前
AI 编程智能体 20:技术栈选型与架构落地全攻略
人工智能·python·架构·langchain·1024程序员节·智能体
xsd2024111820 小时前
RelateAnything:53M小模型如何把视觉关系检测从50个谓词里解放出来
人工智能·1024程序员节
Brilliantwxx1 天前
【STM32】 内部 Flash 详解:寄存器逐位拆解 + 工作流程顺序全讲 + EEPROM再实现
stm32·单片机·嵌入式硬件·1024程序员节
一只鹿鹿鹿1 天前
智算算力、AI-芯片与产品解析(PPT文件)
大数据·运维·网络·人工智能·物联网·1024程序员节
xwz小王子1 天前
Science Advances 让机器人触觉在重压下继续分辨微小变化
机器人·1024程序员节
小小AK1 天前
聚水潭售后单到金蝶退货单同步实战:从增量拉取到目标单据落库的全流程拆解
1024程序员节
Ai-_Man1 天前
Coze扣子还是不可以导出左侧所有对话,只能点进去单条内容导出,方法不对吗?
开发语言·人工智能·ai·小程序·1024程序员节
Android系统攻城狮1 天前
Linux FFmpeg深度解析之av_dump_format调用流程与实战(十一)
linux·运维·服务器·ffmpeg·1024程序员节·音视频进阶