打印 ​

/**
 * 使用`原生html`打印页面(表格、表单、描述列表)
 * ! 解决 滚动条隐藏内容未显示、换页表格项被截断、列边框错位问题
 * @param {String} title 标题
 * @param {Object} tableOptions 表格配置项(包括 tableData 表格数据、tableCol 表格展示项)
 * @param {Object} descriptionsOptions 描述列表配置项(包括 descriptionsData 描述列表数据、descriptionsCol 描述列表展示项)
 * @param {Object} formOptions 表单配置项(包括 formData 表单数据、 formCol 表单展示项)
 * @return {*} 打印页面
 */
function print(title, tableOptions = {}, descriptionsOptions = {}, formOptions = {}) {
  const iframe = document.createElement("IFRAME")
  iframe.setAttribute("id", "myIframe")
  iframe.setAttribute("style", 'position:absolute;width:0px;height:0px;left:-500px;top:-500px')
  document.body.append(iframe)
  const doc = iframe.contentWindow.document

  const _title = title || ''
  doc.write(`
    <style media="print">
      @page {
        size:landscape;
        margin-top: 30px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;        
      }
      .title-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  `)
  doc.write(`<div class="title-text">${_title}</div>`)

  !isEmptyObject(descriptionsOptions) && PrintDescriptions(descriptionsOptions, doc)

  !isEmptyObject(tableOptions) && PrintTable(tableOptions, doc)

  !isEmptyObject(formOptions) && PrintForm(formOptions, doc)

  doc.close()
  iframe.contentWindow.focus()
  iframe.contentWindow.print()
  if (navigator.userAgent.indexOf("MSIE") > 0) {
    document.body.removeChild(iframe)
  }
}


function PrintTable(options, doc) {
  if (!(this instanceof PrintTable)) return new PrintTable(options, doc);
  const tableStyle = this.getTableStyle()
  const tableHtml = this.getTableHtml(options)
  doc.write(tableStyle)
  doc.write(tableHtml)  
}
PrintTable.prototype = {
  getTableStyle: function () {
    return `
      <style media="print"> 
        table {
            border: 1px solid #DFE5EE;
            margin-top: 200px;
            border-spacing: 0;/*去掉单元格间隙*/
            table-layout: fixed; /* 固定表格布局 */
            width: 100%; /* 设置表格宽度 */
        }
        table:first-of-type {
            margin-top: 0px ;
        }
        table thead th{
            border: 1px solid #DFE5EE;
            text-align:center;
            font-size:12px;
            font-weight: normal;
            color: #606266;
            border-collapse:collapse;
            width: auto; /* 取消宽度设置 */
        }
        table tbody td{
            border: 1px solid #DFE5EE;
            text-align:center;
            font-size:12px;
            font-weight: normal;
            color: #606266;
            height: 47px;
            word-wrap: break-word; /* 当单词超出容器宽度时自动换行 */
            white-space: normal; /* 允许内容自动换行 */
        }
        tr {
          page-break-inside: avoid;
        }
      </style>`
  },
  getTableHtml: function (options) {
    const {tableData, tableCol} = options
    const head = `
        <thead>
          <tr>
            ${tableCol.reduce((prev, cur) => prev + `<th>${cur.label}</th>`, '')}
          </tr>
        </thead>
    `
    const body =  `
        <tbody>
          ${tableData.reduce((prev, cur) => prev + `<tr>${tableCol.reduce((p, c) => p + `<td>${cur[c.prop] || ''}`, '')}</tr>`, '')}
        </tbody>
    `
    return `
      <table>
        ${head}
        ${body}
      </table>
    `
  }
}

function PrintForm(options, doc, isForm = true) {
  if (!(this instanceof PrintForm)) return new PrintForm(options, doc, isForm);
  const FormStyle = this.getFormStyle()
  const FormHtml = this.getFormHtml(options, isForm)
  doc.write(FormStyle)
  doc.write(FormHtml)
}
PrintForm.prototype = {
  getFormStyle: function() {
    return `
      <style media="print">
        table {
          border: 1px solid #DFE5EE;
          border-spacing: 0;/*去掉单元格间隙*/
          table-layout: fixed; /* 固定表格布局 */
          width: 100%; /* 设置表格宽度 */
          display: table;
          text-indent: initial;
          border-spacing: 2px;
          border-color: gray;
          border-collapse: collapse;
        }
        .table-col {
          padding: 10px;
          border: 1px solid #e6ebf5;
          box-sizing: border-box;
          text-align:center;
          font-weight: normal;
          line-height: 1.5;
          color: #909399;
          font-size: 15px !important;
        }
      </style>`
  },
  getFormHtml: function(options, isForm) {
    const {formData, formCol} = options
    const n = formCol.length
    const colspan = isForm ? 2 : 1
    const colNum = isForm ? 2 : 3
    const row = Math.floor(n / colNum)
    const rem = n % colNum
    let table = `<div><table><tbody>`
  
    for (let i = 0; i < row; i ++ ) {
      let tr = `<tr>`
      for (let j = 0; j < colNum; j ++ ) {
        tr += `<th colspan="1" class="table-col">${formCol[i*colNum+j].label || ''}</th>
        <td colspan="${colspan}" class="table-col">${formData[formCol[i*colNum+j].value] || ''}</td>`
      }
      tr += `</tr>`
      table += tr
    }
  
    // 最后一行没占满
    if (rem !== 0) {
      let tr = `<tr>`
      for (let j = 0; j < rem; j ++ ) {
          tr += `<th colspan="1" class="table-col">${formCol[row*colNum+j].label || ''}</th>
          <td colspan="${colspan}" class="table-col">${formData[formCol[row*colNum+j].value] || ''}</td>`
        }
      for (let j = 0; j < colNum - rem; j ++ ) {
        tr += `<th colspan="1" class="table-col"></th>
              <td colspan="${colspan}" class="table-col"></td>`
      }
      tr += `</tr>`
      table += tr
    }
  
    table += `</tbody></table></div>`
    return table
  }
}

function PrintDescriptions(options, doc) {
  const {descriptionsData, descriptionsCol} = options
  PrintForm({
    formData: descriptionsData,
    formCol: descriptionsCol
  }, doc, false)
}

function isEmptyObject(obj) {
  for (const _ in obj) {
    return false
  }
  return true
}

const Print = {
  install(Vue) {
    Vue.prototype.$print = print
  }
}
export default Print

import Print from './plugins/print' 
Vue.use(Print)

this.$print('alexshwing', {
  tableData: this.tableData,
  tableCol: this.tableCol,
})