js 实现调用浏览器打印的功能和问题

一.不使用插件

printing() {
        //只打印该dom节点内的内容
        let bdHtml = window.document.getElementById("printeDetail").innerHTML;
        //打印内容赋值innerHTML绘制新页面（window.print()打印当前页)
        window.document.body.innerHTML = bdHtml;
        //调用浏览器打印机
        window.print();
        //刷新页面返回当前页
        //  this.$router.back()
        // location.reload();
}

该方法可以直接调用浏览器打印的api，但是样式会有一些问题，样式在页面显示正常，但是到打印页面时会出现样式丢失。原因是我们只是拿到了文本内容(innerHTML)

二.使用插件

1. 使用前准备

1-1.安装插件

npm install vue-print-nb --save

1-2.引入插件

//在main.js中
import Print from 'vue-print-nb'
Vue.use(Print);

1.3使用插件

 <div>
    <!-- 绑定该指令，直接可以打印 -->
    <div v-print="printObj">打印</div>
    <div id="printeDetail">
      <h1>打印内容区</h1>
    </div>
</div>

//data 配置printObj对象
 data() {
    return {
      printObj: {
        id: "printeDetail",  //要打印的dom片段的id
        popTitle: "", 打印内容的标题，会直接展示在打印页上面,如果不写会默认展示当前页面的title
      },
    }
 }

点击上面的打印按钮，就可以指直接打印内容了。

1-4. 需要注意的点：

1. 要打印的dom片段，打印前必须要在页面展示出来，才能打印

三.打印问题

打印真的有太多问题，比如打印表格会被截断边框，表格tbody的边框作用到了theader上了，样式和预览时不一致，打印无法自然分页，无法给每一页加上表头和表尾

1. 需要给分页的每一页加表头和表尾

分页给每一页加相同的表头和表尾，这里用到了表格的2个属性：在thead标签加入display: table-header-group;和在tfoot中加入display: table-footer-group;

效果：
分页加表头和表尾

小问题：

表格下方内容区和表尾可能会有空白间隔，这是因为当前页下方剩余的地方放不下完整的一行了，为了完整的显示，就会把多出的行显示在下一页，所以会有空白

解决：

修改tbody中的td高度，使空白能完整的放满一行

【点击查看完整代码】

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        @media print {
            INPUT {
                display: none;
            }
        }
    </style>
</head>
 
<body>
    <input type="button" value=" 打 印 " onclick="javascript: window.print();">
    <table border-collapse="collapse"
 
    cellpadding="5"
    cellspacing="0"
    width="975"
    align="center">
        <thead style="display: table-header-group;">
            <tr>
                <td colspan="7" align="center" style="border: 2px solid black;border-right: none;padding: 10px;">
                    <div style="font-weight: bold;">姓名/电话</div>
                </td>
                <td align="center" style="border: 2px solid black;padding: 10px;">地址</td>
            </tr>
            <tr>
                <td align="center" style="border-left: 2px solid black;padding: 10px;border-bottom:2px solid black;border-right: 2px solid black;">姓名</td>
                <td align="center" style="padding: 10px;border-bottom:2px solid black;border-right: 2px solid black;">电话</td>
                <td align="center" style="border-right: 2px solid black;padding: 10px;border-bottom:2px solid black">演员</td>
                <td align="center" style="border-right: 2px solid black;padding: 10px;border-bottom:2px solid black">时间</td>
                <td align="center" style="border-right: 2px solid black;padding: 10px;border-bottom:2px solid black">地点</td>
                <td align="center" style="border-right: 2px solid black;padding: 10px;border-bottom:2px solid black">名称</td>
                <td align="center" style="border-right: 2px solid black;padding: 10px;border-bottom:2px solid black">播放量</td>
                <td align="center" style="border-right: 2px solid black;padding: 10px;border-bottom:2px solid black">类型</td>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr>
              <td  style="border-left:2px solid red">
                <div>龙文章</div>
              </td>
              <td  style="border-right:2px solid red;border-left:2px solid red">
                176888888888
              </td>
              <td  style="border-right:2px solid red">
                烦了
              </td>
              <td  style="border-right:2px solid red">
                <div>
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                </div>
              </td>
              <td  style="border-right:2px solid red">
                2006
              </td>
              <td  style="border-right:2px solid red">
               云南
              </td>
              <td  style="border-right:2px solid red">
                16亿
              </td>
              <td  style="border-right:2px solid red">
                军事
              </td>
            </tr>
            <tr>
              <td  style="border-left:2px solid red">
                <div>龙文章</div>
              </td>
              <td  style="border-right:2px solid red;border-left:2px solid red">
                176888888888
              </td>
              <td  style="border-right:2px solid red">
                烦了
              </td>
              <td  style="border-right:2px solid red">
                <div style="border-top:2px solid #000">
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
      
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
      
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                </div>
              </td>
              <td  style="border-right:2px solid red">
                2006
              </td>
              <td  style="border-right:2px solid red">
               云南
              </td>
              <td  style="border-right:2px solid red">
                16亿
              </td>
              <td  style="border-right:2px solid red">
                军事
              </td>
            </tr>
            <tr>
              <td  style="border-left:2px solid red">
                <div>龙文章</div>
              </td>
              <td  style="border-right:2px solid red;border-left:2px solid red">
                176888888888
              </td>
              <td  style="border-right:2px solid red">
                烦了
              </td>
              <td  style="border-right:2px solid red">
                <div style="border-top:2px solid #000">
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                </div>
              </td>
              <td  style="border-right:2px solid red">
                2006
              </td>
              <td  style="border-right:2px solid red">
               云南
              </td>
              <td  style="border-right:2px solid red">
                16亿
              </td>
              <td  style="border-right:2px solid red">
                军事
              </td>
            </tr>
            <tr>
              <td  style="border-left:2px solid red">
                <div>龙文章</div>
              </td>
              <td  style="border-right:2px solid red;border-left:2px solid red">
                176888888888
              </td>
              <td  style="border-right:2px solid red">
                烦了
              </td>
              <td  style="border-right:2px solid red">
                <div style="border-top:2px solid #000">
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    
                </div>
              </td>
              <td  style="border-right:2px solid red">
                2006
              </td>
              <td  style="border-right:2px solid red">
               云南
              </td>
              <td  style="border-right:2px solid red">
                16亿
              </td>
              <td  style="border-right:2px solid red">
                军事
              </td>
            </tr>
            <tr>
              <td  style="border-left:2px solid red">
                <div>龙文章</div>
              </td>
              <td  style="border-right:2px solid red;border-left:2px solid red">
                176888888888
              </td>
              <td  style="border-right:2px solid red">
                烦了
              </td>
              <td  style="border-right:2px solid red">
                <div style="border-top:2px solid #000">
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                    我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的
                    团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团
                    长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我
                    的团长我的团我的团长我的团我的团长我的团我的团长我
                    的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团我的团长我的团
                </div>
              </td>
              <td  style="border-right:2px solid red">
                2006
              </td>
              <td  style="border-right:2px solid red">
               云南
              </td>
              <td  style="border-right:2px solid red">
                16亿
              </td>
              <td  style="border-right:2px solid red">
                军事
              </td>
            </tr>
        
  
          </tbody>
        <tfoot style="display: table-footer-group;">
            <tr>
                <td colspan="7" align="center" style="border: 2px solid blue; border-right: none;">统计：共xxx人</td>
                <td align="center" style="border: 2px solid blue;">共xxx省份</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

2. 当数据很多的时候，表头和表尾都被表体的td设置的边框给穿插过去了

这种情况会在表格某一列非常多的时候出现
出现的原因是，当第一页无法放入整列数据时，那么这一列就会排布到第二页去。如果说它第二页依然只是渲染到自己本身的tbody的td上，那么，就不会出现这个问题，诡异的是，tbody的td的边框会在第二页从theader就开始排布，一直到tfooter，所以会出现，即使只设置tbody的td的边框为红色，红色的边框还是覆盖到了theader和tfooter。

效果：
分页加表头和表尾被穿插

tips：
如果要自己看效果可以复制3-1的代码，然后把第一个我的团长我的...这段话加多一些文字（只要加第一个，后面的不用），就可以达到溢出效果。

解决：

解决表尾的边框穿插，需要在tfooter标签加个背景属性，值随意。如：background:#fff;（嘿！惊喜的是这个设置放到theader不生效！！！只在tfooter生效）
- <tfoot style="display: table-footer-group;background: black;">
解决表头的边框穿插，既然是列的内容超出页面的高度，溢出到第二页，导致这种情况，那么，就可以把列设置固定高度（如果你的内容是动态的，那么这个方法不适用）

四. 完整代码(vue)

【点击查看完整代码】

<template>
  <div>
    <!-- 绑定该指令，直接可以打印 -->
    <div @click="printing">打印</div>
    <div v-print="printObj" id="printeBtn"></div>
    <div id="printeDetail" ref="postForm">
      <h1 style="text-align:center">中华人民共和国海关进口转关运输货物申报单</h1>
      <div style="display: table-header-group;text-align:left">
        <span style="position:relative;left:4px">预录入号：{{ detailData.preNo }} </span>
        <!-- <span class="msg-right">编　　号：</span> -->
      </div>
      <div style="font-weight: bold;">
          <div style="width: 975px;border: 2px solid #000; z-index: 10000;padding: 10px;margin-left:4px">
            <div style="display: inline-block; width: 240px">
              进出境运输工具名称: {{ detailData.transName }}
            </div>
            <div style="display: inline-block; width: 240px">
              航次(航班)号:{{ detailData.nativeVoyageNo }}
            </div>
            <div style="display: inline-block; width: 250px">
              转关方式: {{ detailData.trnMode }}
            </div>
            <div style="display: inline-block; width: 200px">
              境内运输方式: {{ detailData.trafWay }}
            </div>
          </div>
     
        <div style="border-left: 2px solid #000; border-right: 2px solid #000;width: 975px;margin-left:4px">
          <div style="display: inline-block;width: 190px;z-index: 10000;padding: 10px; ">
            提(运)单总数: {{ ladingLength }}
          </div>
          <div
            style="display: inline-block;width: 200px;z-index: 10000;padding: 10px; "
          >
            货物总件数: {{ detailData.mftGoodsPiece }}
          </div>
          <div
            style="display: inline-block;width: 200px;z-index: 10000;padding: 10px; "
          >
            货物总重量: {{ detailData.mftGrossWeight }}
          </div>
          <div
            style="display: inline-block;width: 180px;z-index: 10000;padding: 10px; "
          >
            集装箱总数: {{ detailData.contaCount }}
          </div>
          <div style="display: inline-block;width: 178px;z-index: 10000;padding: 10px;  "> 境内运输工具: {{ detailData.transName }}
          </div>
        </div>
      </div>
      <table
        border-collapse="collapse"
        border="0" style="border:none"
        cellpadding="5"
        cellspacing="0"
        width="975"
        align="center"
      >
        <thead
          style="display: table-header-group;font-weight: bold;"
        >
          <tr>
            <td
              align="center"
              style="border-right: 2px solid #000;border-bottom: 2px solid #000; width: 160px;padding: 10px;border-top: 2px solid #000;border-left: 2px solid #000;"
            >
              境内运输工具名称
            </td>
            <td
              align="center"
              style="border-right: 2px solid #000;border-bottom: 2px solid #000; width: 160px;padding: 10px;border-top: 2px solid #000"
            >
              提(运)单号
            </td>
            <td
              align="center"
              style="border-right: 2px solid #000;border-bottom: 2px solid #000; width: 160px;;padding: 10px;border-top: 2px solid #000"
            >
              集装箱号
            </td>
            <td
              align="center"
              style="border-right: 2px solid #000;border-bottom: 2px solid #000; width: 350px;padding: 10px;border-top: 2px solid #000"
            >
              货　　名
            </td>
            <td
              align="center"
              style="border-right: 2px solid #000;border-bottom: 2px solid #000; width: 110px;padding: 10px;border-top: 2px solid #000"
            >
              件　　数
            </td>
            <td
              align="center"
              style="border-right: 2px solid #000;border-bottom: 2px solid #000; width: 110px;padding: 10px;border-top: 2px solid #000"
            >
              重　　量
            </td>
            <td
              align="center"
              style="border-right: 2px solid #000;border-bottom: 2px solid #000; width: 160px;padding: 10px;border-top: 2px solid #000"
            >
              电子关锁号
            </td>
            <td
              align="center"
              style="border-right: 2px solid #000; border-bottom: 2px solid #000; width: 70px;z-index: 10000;padding: 10px;border-top: 2px solid #000"
            >
              个数
            </td>
          </tr>
          
        </thead>
        <tbody style="text-align: center">
          <tr v-for="(item, index) in containerDatas.data" :key="index">
            <td style="border-right: 2px solid #000;border-left: 2px solid #000;vertical-align: top;padding-top:10px;padding-bottom:10px">{{ item.transName }}</td>
            <td style="border-right: 2px solid #000;vertical-align: top;padding-top:10px;padding-bottom:10px">{{ item.billNo }}</td>
            <td style="border-right: 2px solid #000; vertical-align: top;padding-top:10px;padding-bottom:10px">{{ item.contaNo }}</td>
            <td style="border-right: 2px solid #000; padding-top:10px;padding-bottom:10px">
              <span v-for="(item1,index1) in item.goodNames" :key="index1">
                         <span style="font-weight:bold">{{`（${index1+1}）`}}
                     </span>{{item1}}
              </span>
            </td>
            <td style="border-right: 2px solid #000; vertical-align: top;padding-top:10px;padding-bottom:10px">{{ item.packNo }}</td>
            <td style="border-right: 2px solid #000; vertical-align: top;padding-top:10px;padding-bottom:10px">{{ item.grossWt }}</td>
            <td style="border-right: 2px solid #000; vertical-align: top;padding-top:10px;padding-bottom:10px">{{ item.sealNo }}</td>
            <td style="border-right: 2px solid #000;vertical-align: top;padding-top:10px;padding-bottom:10px">{{ item.sealNum }}</td>
          </tr>
          <!-- <tr style="page-break-after: always;">
                <td>表格内容3</td>
                <td>表格内容</td>
            </tr> -->
        </tbody>
        <tfoot
          style="display: table-footer-group; font-weight: bold;z-index: 10000;background: #ddd;"
        >
          <tr>
            <td
              colspan="2"
              align="center"
              style=" border-top: 2px solid #000;border-right:  2px solid #000; border-bottom: 2px solid #000; z-index: 10000;border-left: 2px solid #000;"
            >
              <div style="padding: 10px;">
                <div style="text-align: center; padding-bottom: 10px;">
                  以上申报属实,并承担法律责任,
                </div>
                <div style="padding-bottom: 10px;text-align:left;padding-left: 20px">
                  保证在　　　　日内将上述货物完整
                </div>
                <div style="text-align:left;padding-left: 20px; padding-bottom: 10px;">
                  运抵　　　　　　　　海关。
                </div>
                <div style="text-align:left;padding-left: 100px;padding-bottom: 10px;">
                  申报人:
                </div>
                <div style="text-align:left;padding-left: 120px; padding-bottom: 10px;top:10px;position: relative;">
                  年　　 月 　　 日
                </div>
              </div>
            </td>
            <td
              colspan="3"
              align="center"
              style="border-top: 2px solid #000;border-right:  2px solid #000; border-bottom: 2px solid #000; z-index: 10000;"
            >
              <div style="padding: 10px;">
                <div style="text-align: center; padding-bottom: 10px;">
                  进境地海关批注:
                </div>
                <div
                  style="text-align: left; left: 80px; position: relative; padding-bottom: 40px;top:40px;"
                >
                  经办关员:
                </div>
                <div
                  style="padding-left: 175px; position: relative; padding-bottom: 10px;"
                >
                  (盖章)
                </div>
                <div
                  style="padding-left: 175px; position: relative; padding-bottom: 10px;top:5px"
                >
                  年　　 月 　　 日
                </div>
              </div>
            </td>
            <td
              colspan="3"
              align="center"
              style="border-top: 2px solid #000; border-bottom: 2px solid #000; z-index: 10000;border-right: 2px solid #000;"
            >
              <div style="padding: 10px;">
                <div style="text-align: center; padding-bottom: 10px;">
                  指运地海关批注:
                </div>
                <div
                  style="text-align: left; left: 20px; position: relative; padding-bottom: 40px;top:40px;"
                >
                  经办关员:
                </div>
                <div
                  style="padding-left: 80px; position: relative; padding-bottom: 10px;"
                >
                  (盖章)
                </div>
                <div
                  style="padding-left: 100px; position: relative; padding-bottom: 10px;top:5px"
                >
                  年　　 月 　　 日
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "TransitPrinting",
  props: ["containerDatas", "detailData", "ladingLength"],
  data() {
    return {
      printObj: {
        id: "printeDetail",
        popTitle: ""
      },
    };
  },
  methods: {
    // 打印，非手动触发打印
    printing() {
      document.getElementById("printeBtn").click();
    },
    closePrinte() {
      this.$emit("closePrinte");
    }
  }
};
</script>