引入
官网链接:https://printjs.crabbly.com/
直接放插件文件
import printJS from "@/plugin/print-js";
或者
npm install print-js --save
import printJS from 'print-js'
样例
UI用的是ElementUI
<el-row class="btnInfo">
<el-button class="submitBtn" type="primary" @click="beforePrint">
批量打印预览
</el-button>
</el-row>
<el-dialog
title="打印预览"
:visible.sync="dialogVisible"
class="bank-dialog"
width="820px"
:closeOnClickModal="false"
:closeOnPressEscape="false">
<div id="print_table_batch" style="">
<!-- 这个是循环打印多个单据,一页放两张单据 -->
<div v-for="(item, index) in multipleSelection.length === 0 ? [] : multipleSelection" :key="index">
<div :style="{'page-break-after': index % 2 == 0 && index !== 0 ? 'always' : ''}"></div>
<!-- 这个是要打印的内容组件 -->
<verifiedResult :tableTitle="tableTitle" :tableData="item" :printMode="false"></verifiedResult>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="print">打印</el-button>
</span>
</el-dialog>
//在print方法中执行打印,printable对应的id就是要打印的内容上面的div的id,打印的就是div包含的html内容,内容的样式在style里写。
print() {
this.dialogVisible = false;
this.$nextTick(() => {
printJS({
printable: "print_table_batch",
type: "html",
style: `
.boxWrap{
margin-bottom: 10px;
}
.verifiedTable{
width:100%;
border-collapse: collapse;
table-layout: fixed;
}
.verifiedTitle{
text-align: center;
margin: 5px 0;
}
.verifiedTh_img{
width: 82px;
height: 20px;
vertical-align: middle;
margin-right:10px;
}
.verifiedTh_img_singed{
width: 80px;
height: 50px;
}
.verifiedTh_title{
display: inline-block;
vertical-align: middle;
line-height: 20px;
font-weight: 600;
}
td{
border:1px solid #ccc;
padding:4px;
height: 16px;
word-break: break-word;
font-size: 12px;
}
.verifiedTd{
width:20%;
text-align: center;
word-break: normal;
}
.verifiedTd_in{
width:8%;
text-align: center;
}
.text {
color: #ff0000;
padding-left: 10px;
}
.btnInfo{
display: none;
}`
});
});
}