文章参考脚本之家: vue中使用vue-print.js实现多页打印
本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。
引入安装vue-print.js
cnpm i vue-printjs --save-dev
解决打印多页只出现一页问题
由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装
下载 print.js
https://github.com/zxc19890923/print/blob/master/print.js
在src目录下面创建plugins/print/Print.js文件保存插件内容
修改 print.js
// 搜索getStyle方法，添加：str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
return str;
},
main.js中引入插件
import Print from './plugins/print/Print'
Vue.use(Print)
vue文件中的使用
<div class="show">
这是展示的需要打印的内容，给用户看的。
</div>
<div ref="print" class="recordImg" id="print">
这里是需要打印的内容，出现在打印预览的界面，这里的样式需要写在 @media print {
}里面 如果需要设置预览页规则，页脚等样式 @page {
}
<div class="no-print">不需要打印的内容</div>
<div class="do-not-print-div">不要打印我</div>
<button @click="printContext">打印</button>
</div>
...
<script>
...
method: {
printContext () {
this.$print(this.$refs.print)
}
// 不打印方法1. 添加no-print样式类
// 不打印方法2. this.$print(this.$refs.print,{'no-print':'.do-not-print-div'})
}
</script>
最后
1、为了打印全部，手动下载插件并修改。
2、打印内容样式需要写在 @media print {}中
3、this.$print(),不需要打印内容可以通过css，js两种方法控制
个人参考代码及效果
main.js中引入插件
import print from "@/assets/js/print";
Vue.use(print);
<template>
<div class="dayin">
<div class="show">{
{
detailform.company.name +'\xa0\xa0检查记录表'}}</div>
<div ref="print" class="recordImg" id="print">
<div class="content">
<table>
<tbody class="top-tbody">
<tr style="height:25px;">
<td style="width:95px;font-weight:bold">单位名称</td>
<td class="td-left" style="width:350px;">{
{
detailform.company.name}}</td>
<td style="width:75px;font-weight:bold">任务编号</td>
<td style="width:110px;">{
{
detailform.taskCode}}</td>
</tr>
<tr style="height:25px;">
<td style="width:95px;font-weight:bold">单位地址</td>
<td class="td-left" colspan="3">{
{
detailform.company.address}}</td>
</tr>
<tr style="height:25px;">
<td style="width:95px;font-weight:bold">随同检查人员</td>
<td class="td-left" colspan="3"></td>
</tr>
<tr>
<td style="width:95px;font-weight:bold">检查说明</td>
<td class="td-left" colspan="3">{
{
detailform.checkTaskResult.remark}}</td>
</tr>
</tbody>
</table>
<table style="border-top:none;">
<tbody class="bottom-tbody">
<tr class="tr-head" style="height:25px;border-bottom:1px solid #000;">
<td class="td-bold td-center" colspan="5">检查过程记录</td>
</tr>
<tr class="tr-head" style="height:25px;">
<td class="td-bold td-center column-1">NO.</td>
<td class="td-bold td-center column-2" style=" ">检查时间</td>
<td class="td-bold td-center column-3">检查结果</td>
<td class="td-bold td-center column-4">处理方式</td>
<td class="td-bold td-center column-5">检查人</td>
</tr>
<tr
class="tr-body"
style="height:25px;"
v-for=" (item,key) in detailform.checkTaskRecords"
:key="key"
>
<td class="td-body-color td-center column-1 column-body-1">{
{
parseInt(key)+1}}</td>
<td
class="td-body-color td-center column-2 column-body-2"
>{
{
$moment(item.checkTime).format('YYYY-MM-DD HH:mm:ss')}}</td>
<td
class="td-body-color td-center column-3 column-body-3"
>{
{
selectResult(item.result)}}</td>
<td
class="td-body-color td-center column-4 column-body-4"
>{
{
handleWay(item.handleWay)}}</td>
<td class="td-body-color td-center column-5 column-body-5">{
{
item.checkPeople}}</td>
</tr>
<tr class="tr-head" style="height:25px; ">
<td
style="font-weight:bold; text-align:left"
colspan="5"
>检查项目 共计检查项：{
{
detailform.checkTaskResult.checkNumber}} 未检查项：{
{
detailform.checkTaskResult.uncheckNumber}} 不合格隐患：{
{
detailform.checkTaskResult.dangerNumber}}</td>
</tr>
<tr class="tr-head" style="height:25px;">
<td class="td-bold td-center column-1">NO.</td>
<td class="td-bold td-center" colspan="2">检查内容</td>
<td class="td-bold td-center column-4">结果</td>
<td class="td-bold td-center column-5">描述</td>
</tr>
<template v-if="detailform.checklist">
<template v-for="(item,key) in detailform.checklist.checklistParents">
<tr :key="1+key+'哈哈哈'">
<td
class="td-bold"
style=" text-align:left"
colspan="5"
>{
{
parseInt(key)+1}}、{
{
item.content}}</td>
</tr>
<tr v-for="(item1,key1) in item.checklistSons" :key="key1+key+1">
<td
class="td-body-color td-center column-1 column-body-1"
rowspan="1"
>{
{
parseInt(key1)+1}}</td>
<td class="td-body-color" colspan="2">{
{
item1.content}}</td>
<td
class="td-body-color td-center column-1 column-body-4 Result1"
style="width:120px;text-align:center;"
>{
{
item1.result}}</td>
<td class="td-body-color td-center column-5 column-body-5">{
{
item1.remark}}</td>
</tr>
</template>
</template>
</tbody>
</table>
</div>
<div class="no-print">
<el-button size="mini" class="btn" @click="printContext">打印</el-button>
<el-button size="mini" class="btn" @click="close">关闭</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
detailform: {
}
};
},
methods: {
//打印
printContext() {
// 修改页眉标题
document.title = this.detailform.company.name + "检查记录表";
document.title = document.title.replace(/检查记录表$/g, function(i) {
return " \xa0\xa0" + i;
});
this.$print(this.$refs.print);
},
// 关闭
close() {
window.close();
},
handleWay(id) {
let resultList = [
"一级审查",
"限期整改",
"现场改正",
"二级审查",
"联合执法-停业整顿",
"联合执法-强制结业",
"抽检复检",
"上报管理员",
"指派人员"
];
return id ? resultList[id - 1] : "";
},
selectResult(id) {
let resultList = [
"待检查",
"合格",
"现场改正",
"整改后合格",
"一级审查合格",
"二级审查合格",
"复检合格",
"联合执法-强制结业",
"不合格",
"限期整改",
"一级审查",
"二级审查",
"抽检复检",
"联合执法-停业整顿",
"过期未巡检",
"过期未抽检",
"过期未审查",
"过期未复查",
"过期未复检",
"申请联合执法",
"理由不充分退回",
"联合执法",
"联合执法合格"
];
return id ? resultList[id - 1] : "";
}
},
created() {
this.detailform = this.$store.state.printData || {
};
if (
this.detailform.checklist &&
this.detailform.checklist.checklistParents.length != 0
) {
this.detailform.checklist.checklistParents = this.detailform.checklist.checklistParents.filter(
item => {
return item.content != "自定义";
}
);
}
var _this = this;
setTimeout(function() {
let a = _this.$store.state.printData;
console.log(a);
}, 3000);
},
mounted() {
this.printContext();
}
};
</script>
<style lang="less" scoped>
.dayin {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
@media print {
text-align: center;
width: 100%;
margin: auto;
page-break-after: always;
margin-top: 20px;
font-family: "微软雅黑";
}
@page {
// margin-top: 1mm;
// margin-bottom: 1mm;
}
#print {
text-align: center;
.content {
}
.btn {
}
}
}
table {
width: 700px;
border-left: 1px solid #000;
border-top: 1px solid #000;
padding: 0px;
margin: 0px;
border-spacing: 0px;
.top-tbody {
}
.bottom-tbody {
.column-1 {
width: 50px;
}
.column-2 {
width: 180px;
}
.column-3 {
width: 160px;
}
.column-4 {
width: 120px;
}
.column-5 {
width: 150px;
}
.column-body-1 {
}
.column-body-2 {
}
.column-body-3 {
}
.column-body-4 {
}
.column-body-5 {
}
}
.tr-head {
height: 25px;
}
.tr-body {
}
.td-bold {
font-weight: bold;
}
.td-center {
text-align: center;
}
.td-left {
text-align: left;
}
.td-body-color {
color: black;
}
}
.Result0 {
}
.Result1 {
color: gray;
}
td {
border-bottom: 1px solid #000;
border-right: 1px solid #000;
padding: 0px;
margin: 0px;
border-spacing: 1px;
}
body {
padding-left: 15px;
font-size: 10.5pt;
overflow: auto;
}
</style>