el-table表格与 el-calendar日历打印

最新推荐文章于 2024-05-13 09:36:36 发布

lankerxd

最新推荐文章于 2024-05-13 09:36:36 发布

阅读量1k

点赞数

分类专栏： Fontend-前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43345846/article/details/121329172

版权

Fontend-前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

打印效果如下：
当然马赛克打不出来的哈

el-calendar:日历
注：这个1号，是得自己修改的哈，详见el文档
el-table:表格

el-calendar打印方法：

printCalendar(id = 'needPrint', dayHeight = '95') {
     // 空页面
     let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>"
     // 定义element-ui table组件的样式
     const tabStyle = `<style>
         .el-calendar {background-color: #fff;}
         .el-calendar__header {
          display: flex;justify-content: space-between;
          padding: 12px 20px;border-bottom: 1px solid #EBEEF5;}
         .el-calendar-table.thead {border-bottom: 1px;solid #EBEEF5;}
         .el-calendar__title {color: #000;align-self: center;}
         .el-calendar__button-group {display: none;}
         .el-calendar__body { padding: 12px 20px 35px}
         .el-calendar-table {table-layout: fixed;width: 100%;}
         .el-calendar-table th { border-bottom: 1px solid #EBEEF5; }
         .el-calendar-table tr td:first-child {border-left: 1px solid #EBEEF5;}
         .el-calendar-table td { border-bottom: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;
          vertical-align: top;transition: background-color .2s ease;}
         .el-calendar-table .el-calendar-day {box-sizing: border-box;padding: 0px;height: ${dayHeight}px;}
         .warning-value{background-color:orange}
         .el-calendar__title {font-size: 20px;color: #000;align-self: center;}
         </style><body>`
     let content = ''

     // 获取名为传入id的 dom元素内的内容
     const str = document.getElementById(id).innerHTML

     // 拼接空页面+style样式+dom内容
     content = content + str
     printStr = printStr + tabStyle + content + '</body></html>'
     // 打开新页面
     const pwin = window.open('_blank')
     // 将内容赋值到新页面
     pwin.document.write(printStr)
     pwin.document.close()
     // 聚焦-不加focuse，在某些情况下，打印页面会有问题。
     pwin.focus()
     // 使用setTimeout，等页面dom元素渲染完成后再打印。
     setTimeout(() => {
         pwin.print() // 打印功能。 例如 window.print() 直接打印当前整个页面。
         pwin.close()
     }, 500)
  },

方法参数：

参数名	解释
id	是el-calendar标签的id，< el-calendar id=“needPrint” > < /el-calendar >
dayHeight	打印时，X号所在小框的高度

el-table打印方法：

printTable(id = 'needPrint', title = undefined, maxWidth = '1000') {
    let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>"
    const tabStyle = `<style>
      table.el-table__body {max-width: ${maxWidth}px}
    </style><body>`

    var tableBody = document.getElementsByClassName('el-table__body')[0]
    tableBody.border = '1'

    // 获取名为传入id的 dom元素内的内容
    const div = document.createElement('div')
    div.innerHTML = document.getElementById(id).innerHTML
    // 将el-table 的header与body合二为一
    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()
    var newHeader = '<tr>'
    for (let i = 0, len = ThsTextArry.length; i < len; i++) {
      newHeader += '<td style="text-align: center; font-weight: bold">' + ThsTextArry[i] + '</td>'
    }
    newHeader += '</tr>'
    div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin', newHeader)
    var titleHTML = ''
    if (title) {
      titleHTML = `<div style="text-align: center;font-size:30px;font-weight:bold">${title}</div>`
    }

    printStr = printStr + tabStyle + titleHTML + div.innerHTML + '</body></html>'
    // 打开新页面
    const pwin = window.open('_blank')
    // 将内容赋值到新页面
    pwin.document.write(printStr)
    pwin.document.close()
    // 聚焦-不加focuse，在某些情况下，打印页面会有问题。
    pwin.focus()
    // 使用setTimeout，等页面dom元素渲染完成后再打印。
    setTimeout(() => {
        pwin.print() // 打印功能。 例如 window.print() 直接打印当前整个页面。
        pwin.close()
        try {
         tableBody.border = '0'
        } catch (err) {}
    }, 500)
  }

方法参数：

参数名	解释
id	是el-table标签的id，< el-table id=“needPrint” > < /el-table >
title	这个是加在表格顶部的标题，自己试试就晓得了
maxWidth	因为我打印的是A4纸，所以默认是1000px宽度，这个看自己实际情况。

lankerxd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
el-table表格与 el-calendar日历打印

打印效果如下：当然马赛克打不出来的哈el-calendar:日历注：这个1号，是得自己修改的哈，详见el文档el-table:表格el-calendar打印方法：printCalendar(id = 'needPrint', dayHeight = '95') { // 空页面 let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; c
复制链接

扫一扫