最近在做一个后台管理系统,有个模块需要用到打印功能,想着直接使用浏览器自带的打印功能 ,也就是
window.print()
,但是因为功能有局限性,会把整张网页都打印出来,而且我还需要保留原有的样式。所以这里使用到了print-js
这个插件。
下载 print-js
npm i print-js
引入此模块
import printJS from 'print-js'
要打印的页面的局部数据
<el-button color="#6b8fe2" plain size="small" @click="onPrint">打印</el-button >
<div ref="printContent" id="printContent">
//我这里的数据是表格数据,内容是想要打印的内容,看大家的情况编辑,从这里开始
<h3 class="word-caption">{{ ltableData.caption }}</h3>
<span class="table-date" style="fontsize: 16px; lineheight: 40px">年 月 日</span>
<table border="1px" class="word-table" style="textalign: center">
<tr>
<td class="word-td">{{ ltableData.tr1td1 }}</td>
<td colspan="2" class="word-td1"></td>
<td class="word-td">{{ ltableData.tr1td2 }}</td>
<td colspan="2" class="word-td1"></td>
<td rowspan="4">照片</td>
</tr>
<tr>
<td class="word-td">{{ ltableData.tr2td1 }}</td>
<td class="word-td2"></td>
<td class="word-td">{{ ltableData.tr2td2 }}</td>
<td class="word-td2"></td>
<td class="word-td">{{ ltableData.tr2td3 }}</td>
<td class="word-td2"></td>
</tr>
<tr>
<td class="word-td"> {{ ltableData.tr3td1 }}</td>
<td class="word-td2"></td>
<td class="word-td">{{ ltableData.tr3td2 }}</td>
<td class="word-td2"></td>
<td class="word-td">{{ ltableData.tr3td3 }}</td>
<td class="word-td2"></td>
</tr>
<tr>
<td class="word-td">{{ ltableData.tr4td1 }}</td>
<td colspan="2"></td>
<td class="word-td">{{ ltableData.tr4td2 }}</td>
<td colspan="2"></td>
</tr>
<tr>
<td class="word-td">{{ ltableData.tr5td1 }}</td>
<td></td>
<td class="word-td">{{ ltableData.tr5td2 }}</td>
<td></td>
<td class="word-td">{{ ltableData.tr5td3 }}</td>
<td colspan="2">√是 否</td>
</tr>
<tr>
<td class="word-td">{{ ltableData.tr6 }}</td>
<td colspan="7" style="height: 100px"></td>
</tr>
<tr>
<td class="word-td">{{ ltableData.tr7 }}</td>
<td colspan="7" style="height: 120px"></td>
</tr>
<tr>
<td class="word-td">{{ ltableData.tr8 }}</td>
<td colspan="7" style="height: 100px"></td>
</tr>
<tr>
<td class="word-td">{{ ltableData.tr9 }}</td>
<td colspan="7" style="height: 80px"></td>
</tr>
</table>
//到这里结束
</div>
js代码
我这里的js用的是vue3组合式setup语法糖的写法
<script setup>
import { onMounted,reactive,ref } from "vue";
import printJS from "print-js";
// 打印内容与div标签绑定
const printContent = ref(null);
const ltableData = reactive({
caption: "xxx社团报名表",
tr1td1: "院系",
tr1td2: "专业",
tr2td1: "姓名",
tr2td2: "性别",
tr2td3: "籍贯",
tr3td1: "政治面貌",
tr3td2: "民族",
tr3td3: "身高/体重",
tr4td1: "联系方式",
tr4td2: "电子邮箱",
tr5td1: "第一意愿",
tr5td2: "第二意愿",
tr5td3: "是否接受调剂",
tr6: "兴趣爱好/个人特长",
tr7: "个人经历(参与过的社团经历、社会实践等)",
tr8: "曾获得的奖项",
tr9: "个人优势",
});
//打印按钮
const onPrint = () => {
//获取元素
const node = printContent.value;
printJS({
printable: node,
type: "html",
targetStyles: ["*"], //添加样式
});
};
</script>
样式
<style lang="scss" scoped>
.newManager {
margin-top: 15px;
height: 100%;
width: 100%;
display: flex;
.leftMain {
position: relative;
.card-title {
margin-top: 10px;
}
}
// overflow: auto;
.rightMain {
margin-left: 25px;
margin-right: 15px;
flex: 1;
width: 100%;
overflow: auto;
.word-caption {
font-size: 25px;
text-align: center;
}
.word-table {
width: 100%;
text-align: center;
margin-bottom: 200px;
.word-td {
width: 100px;
height: 38px;
}
.word-td1 {
width: 135px;
}
.word-td2 {
width: 90px;
}
}
.word-header {
margin-bottom: 30px;
display: flex;
// float: right;
flex-direction: row-reverse;
// justify-content: space-between;
}
}
}
实现效果