No plug-ins
Printing () {/ / print only within the dom node content let bdHtml = window. The document. The getElementById (" printeDetail "). The innerHTML; / / print content assignment innerHTML draw new page (window. The print () to print the current page) the window. The document. The body. The innerHTML = bdHtml; // Call the browser printer window.print(); // this.$router.back() // location.reload(); }Copy the codeThis method can call the browser printing API directly, but there are some problems with the style, the style appears fine on the page, but the style will be lost on the printed page. And the reason is we’re just taking the text content
Use plug-ins
1. Prepare before use
1-1. Install the plug-in
npm install vue-print-nb --save
Copy the code1-2. Introduce plug-ins
Import Print from 'vue-print-nb' vue. use(Print); import Print from 'vue-print-nb' vue. use(Print);Copy the code1.3 Using Plug-ins
<div> <! -- Bind the directive, You can print --> <div v-print="printObj"> print </div> <div id="printeDetail"> <h1> Print content area </h1> </div> </div> </ data configure printObj object Data () {return {printObj: {id: "printeDetail", // the id of the DOM fragment to print popTitle: ", the title of the printed content will be displayed directly on the printed page. If not, the title of the current page will be displayed by default.Copy the codeClick the print button above, you can refer to the direct print content.
1-4. Points needing attention:
-
- The DOM snippet to print must be displayed on the page before printing
Three. Printing problems
There are really too many problems in printing, such as table printing will be truncated border, table Tbody border is applied to theader, the style is not consistent with the preview, printing cannot be naturally pagination, cannot add table header and table tail to each page
1. You need to add headers and footers to each paginated page
Display: table-header-group; display: table-header-group; display: table-header-group; Add display: table-footer-group to tfoot;
Effect:
Small problem:
- There may be a blank space between the bottom of the table and the bottom of the table. This is because the remaining space at the bottom of the current page does not fit the full row, and the extra row is displayed on the next page for full display, so there is a blank space
Solution:
- Modify the TD height in tBody so that the blank space fills the line completely
[Click to see the full code]
<!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>
Copy the code2. When there is a lot of data, the table header and table tail are set by the table body TD border to intersperse past
-
This happens when there are too many columns in the table
-
The reason for this is that when a full column of data cannot fit on the first page, the column is placed on the second page. If its second page is still just rendered to its own TBody TD, then,
The weird thing is that tBody’s TD border is placed on the second page from theader all the way to tfooter, so even if only tBody’s TD border is set to red, the red border still covers both theader and tfooter.
Effect:
If you want to see the effect by yourself you can copy the 3-1 code, and then put the first my head my… Add a few more words to this paragraph (just add the first one, not the rest) to achieve the overflow effect.
Solution:
- Solve the table tail border intersperse, need in
Tfooter labelAdd aBackground properties, values are arbitrary. Such as:background:#fff;(hey! Surprisingly this setting does not work in theader!! Only in tfooter)<tfoot style="display: table-footer-group; background: black;" >
- The column height can be set to a fixed height (if your content is dynamic, then this method does not apply).
Iv. Complete Code (VUE)
[Click to see the full code]
<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>
Copy the code