前端打印中出现的问题及解决方法

问题一：表格嵌套边框问题

问题二：表格嵌套，边框对齐问题；

th中的表头设置百分比，嵌套表格里面的td设置同样的百分比。

 <table
      id="printBox"
      class="outer-table"
      cellspacing="0"
      cellpadding="0"
      align="center"
      border="1"
    >

　　　　<tr>

</tr>

      <tr v-for="(item, index) in data1" :key="index">
        <td class="set-td">{{ item.code }}</td>
        <td class="set-td">1</td>
        <td colspan="5">
          <table cellspacing="0" cellpadding="0" class="inner-table" border="1">
            <tr v-for="(im, ix) in data2[index]" :key="ix">
              <td class="set-td">{{ im.name }}</td>
              <td class="set-td">{{ im.code }}</td>
              <td class="set-td">{{ im.model }}</td>
              <td class="set-td">{{ im.slz }}</td>
              <td class="set-td">{{ im.slm }}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

.outer-table {
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  .set-td {
    width: 10%;
  }
  .inner-table {
    width: 100%;
    border-collapse: collapse;
    border-width: 0px;
    border-style: hidden;
  }
}

问题三：打印分页问题：

普通分页打印在想分页的地方使用样式 page-break-after:always;如果希望在每页放不下的位置提前分页，可以在tr标签样式中使用 page-break-inside: avoid;

复杂分页，要使用thead,tbody,tfoot标签配合样式（样式可以不写<thead style="display: table-header-group">xxxxxx<thead> <tfoot style="display: table-footer-group">xxxx</tfoot>）

 <table
      id="printBox"
      class="outer-table"
      cellspacing="0"
      cellpadding="0"
      align="center"
      border="1"
    >
      <thead>
        <tr>
          <th colspan="7">我是大标题</th>
        </tr>
        <tr>
          <th class="set-td">订单号</th>
          <th class="set-td">台数</th>
          <th class="set-td">部件名称</th>
          <th class="set-td">型号</th>
          <th class="set-td">规格</th>
          <th class="set-td">数量支</th>
          <th class="set-td">数量米</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data1" :key="index">
          <td class="set-td">{{ item.code }}</td>
          <td class="set-td">1</td>
          <td colspan="5">
            <table
              cellspacing="0"
              cellpadding="0"
              class="inner-table"
              border="1"
            >
              <tr v-for="(im, ix) in data2[index]" :key="ix">
                <td class="set-td">{{ im.name }}</td>
                <td class="set-td">{{ im.code }}</td>
                <td class="set-td">{{ im.model }}</td>
                <td class="set-td">{{ im.slz }}</td>
                <td class="set-td">{{ im.slm }}</td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td colspan="7">我是底部内容*</td>
        </tr>
      </tfoot>
    </table>

打印样式：(让除第一页的嵌套表格出现的粗边框消失)

@page {

size: auto;

margin: 10px;

}

问题四：若出现第二页顶部的margin-top没有效果，可以在<thead>标签里添加一个空白tr，撑位置。

 <tr>
          <td
            colspan="7"
            style="
              border-top-color: white;
              border-left-color: white;
              border-right-color: white;
            "
          ></td>
        </tr>

vue打印的组件使用的是vue-print-nb

安装命令：

npm install --save vue-print-nb

引用

 import  print from "vue-print-nb";

作为指令注册：

directives: {
    print,
  },

使用：

  <el-button v-print="printObj" size="small" type="primary">打印</el-button>

在data中定义:

  
data(){
    return{
        printObj: {
            id: "printBox",
      },
    }
}

　打印的地方使用id=“printBox”　即可。

如果想打印页眉页脚（默认是打印页眉页脚的，但是因为bug不再展示，可以使用下面的代码）

@page {

margin: 10mm 16mm;//只想打印页脚，可以注释这里

margin-bottom: 10mm;

}

如果只想展示页码，左下侧网页地址（url）和头部页眉都不想展示

1.css样式

@page {

margin-bottom: 10mm;

}

2.js代码

 handleOnPrint() {
      var printElement= document.getElementById('printBoxNote3') //这里的Id是要打印区域的id属性值。  最好使用div包裹一圈。
      this.printdiv(printElement)
    },


    printdiv(printpage) {
      var newstr = printpage.innerHTML 
      document.body.innerHTML = newstr
      var printWindow = window.open('·', '_blank') 
      printWindow.document.write('<html><head><title>打印送货单</title>')
      var styles = document.head.getElementsByTagName('style')
      var links = document.head.getElementsByTagName('link') 
      for (var i = 0; i < styles.length; i++) {
        printWindow.document.write(styles[i].outerHTML)
      } 
      for (var j = 0; j < links.length; j++) {
        printWindow.document.write(links[j].outerHTML)
      }

      printWindow.document.write('</head><body>')
      printWindow.document.write(newstr)
      printWindow.document.write('</body></html>')
      this.$router.go(0);//解决bug  打印时跳转到新页面，原页面展示不全。刷新页面就可以了
      printWindow.print()
      
    },

如果想撑满打印纸张

将要打印的容器设置绝对路径。

@media print {
  #printTagView {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    table{
    height:100%;
    }
  }    

    
}

近期打印出现的问题

表格没有及时截断

解决方法

在table标签中定义行内样式 border-collapse: collapse; 就可以改变td标签的边框样式。

问题：使用table标签，内容只有一列，但是没有撑满表格的一行

解决方案 在table中的行内样式中设置 style="display:table;"

问题：打印预览可以看到表格边框，但是用户打印的时候边框消失了。

 table {   
    border-collapse: collapse;
    border: 1px solid #000;
    td,
    th {      
      border:1px solid #000;
    }
  }

posted @ 2024-03-06 22:42 山吹同学阅读(708) 评论(0) 收藏举报

刷新页面返回顶部