（下边答疑解惑 讲解了如何分布多页面 如何调整纸张大小 ）
安装
To install using npm:
npm install print-js --save
To install using yarn:
yarn add print-js最近的新需求，是打印表格 查了好多地方，然后总结了三种方法
无论哪种方式都需要下载 然后引入
地址：https://printjs.crabbly.com/
import printJS from 'print-js';方法一：主要是打印页面上的所有东西 ，页面有什么他就打印什么，标签除外，但是 这个没有选择性，
<template>
<div class="print-div" id="print_area">
<Row type="flex" class="example-body">
<Col :flex="2" class="demo-uni-col dark_deep" v-for="item in list" :key="item.id">
<p>{{ item.text }}</p>
<p>
<input type="number" class="inputNumber" :min="0" :max="10" v-model="item.input">
<!-- <input type="number" class="inputNumber" :min="0" :max="10" v-model="from1[item.num]" /> -->
</p>
</Col>
</Row>
<button @click="printSomething">打印</button>
</div>
</template>
<script lang="ts">
import printJS from 'print-js';
import { Row } from 'ant-design-vue';
import { Col } from 'ant-design-vue';
import { reactive } from 'vue'
export default {
components: {
Row,
Col,
},
setup() {
const list: any = reactive([
{
id: 1,
text: '出勤情况：满勤，无请假迟到早退等情况（满分10分）',
num: '出勤情况',
input: ''
},
{
id: 2,
text: '工作积极性：主动承担分内工作，对本人职责范围内的工作无推诿（满分10分）',
num: '工作积极性',
input: ''
},
{
id: 3,
text: '责任意识：本职工作有责任心，及时完成交付的工作，无拖延（满分10分）',
num: '责任意识',
input: ''
},
{
id: 4,
text: '协作与配合：与上下级，同事工作配合度（满分10分）',
num: '协作与配合',
input: ''
},
])
function printSomething() {
// 此处的style即为打印时的样式
const style = '@page { } ' + '@media print { .print-div{ padding:8px;background-color:#cccccc;line-height:12px } .red{ color:#f00} .green{color:green}';
printJS({
printable: 'print_area',
type: 'html',
style: style,// 亦可使用引入的外部css;
scanStyles: false
})
}
return {
list,
printSomething
}
}
}
</script>
<style>
</style>
print包裹在哪就从哪里开始进行渲染
效果展示
-------------------------------------------------------------------------------------------------------------------------------
方法二 ： 这个主要是在下边的打印列表进行数据的导入，然后在进行输出，但是格式相对来说比较固定，你需要在他给你的属性里边定义数据
<template>
<div>
<button @click="jsonPrint">打印</button>
</div>
</template>
<script lang="ts">
import printJS from 'print-js';
import { Row } from 'ant-design-vue';
import { Col } from 'ant-design-vue';
import { reactive , ref } from 'vue'
export default {
components:{
Row,
Col,
},
setup(){
const nav: any = reactive([{
id: 1,
text: '任务达成：工作成绩考核（满分5分））',
num: '任务达成',
input:'',
powerOutageTotalNum:'powerOutageTotalNum'
},
{
id: 2,
text: '成本控制：工作任务中的各项费用、物资、时间成本管控（满分5分）',
num: '成本控制',
input:'',
powerOutageTotalNum:'powerOutageTotalNum'
},
{
id: 3,
text: '岗位意识：本职工作整体认知及达成效果（满分5分）',
num: '岗位意识',
input:'',
powerOutageTotalNum:'powerOutageTotalNum'
},
{
id: 4,
text: '岗位规划：岗位长远规划及执行情况等（满分5分）',
num: '岗位规划',
input:'',
powerOutageTotalNum:'powerOutageTotalNum'
},
]);
function jsonPrint() {
printJS({
printable: nav, //表格的数据
properties: [ //表头
{field: 'id', displayName: '地区', columnSize: `10%`},
{field: 'text', displayName: '确认跳闸条数',columnSize: `65%`},
{field: 'num', displayName: '误报条数'},
{field: 'input', displayName: '跳闸总条数'},
{field: 'powerOutageTotalNum', displayName: '误报指数', columnSize: `10%`},
],
type: 'json',
gridHeaderStyle: 'border: 1px solid #000;text-align:center',
gridStyle: 'border: 1px solid #000;text-align:center',
style: ' span {color :red ;width: 300px;border: 1px solid #000; display: flex; }' // 表格样式
})
}
return{
nav,
jsonPrint,
}
}
}
</script>
<style>
</style>但是样式相对来说比较固定
效果展示
方式三 ： 在header里边进行定义 然后在里边进行数据的排版修改等 样式相对来说灵活 你可以在里边选择自己需要的样式 内容 然后在进行渲染
<template>
<div>
<Button type="primary" @click="jsonPrint">打印</Button>
</div>
</template>
<script lang="ts">
import printJS from 'print-js';
import { Button } from '/@/components/Button';
export default {
components:{
Button,
},
setup(){
let name2="周阿狗"
function jsonPrint() {
printJS({
printable: [], //表格的数据
header: `<div style="display: flex;flex-direction: column;text-align: center">
<table border="1" width="100%" height="100%" >
<tr>
<!-- colspan跨n列 -->
<td colspan="12">学生作业考核评价表</td>
</tr>
<tr>
<td colspan="2">员工姓名</td>
<td colspan="2">${name2}</td>
<td colspan="1">部门</td>
<td colspan="3">德玛西亚</td>
<td colspan="2">所在职位</td>
<td colspan="2">射手</td>
</tr>
<tr>
<td colspan="3">考核时间段</td>
<td colspan="3">2022/08/14</td>
<td colspan="1">--</td>
<td colspan="5">2022/08/14</td>
</tr>
<tr>
<td colspan="4">老师考核</td>
<td colspan="8">良好：80分≤考核分＜90</td>
</tr>
</table>
<table border="1" width="100%" height="100%" >
<tr>
<td colspan="1">序号</td>
<td colspan="1">项目</td>
<td colspan="4">考核标准评分</td>
<td colspan="2">自我评分</td>
<td colspan="2">老师评分</td>
<td colspan="3">综合评分</td>
</tr>
<tr>
<td rowspan="4">1</td>
<td rowspan="4">考勤状况及态度考核</td>
<td colspan="4">出勤情况：满勤，无请假迟到早退等情况（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">工作积极性：主动承担分内工作，对本人职责范围内的工作无推诿（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">责任意识：本职工作有责任心，及时完成交付的工作，无拖延（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">协作与配合：与上下级，同事工作配合度（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td rowspan="5">2</td>
<td rowspan="5">个人素质和工作能力考核</td>
<td colspan="4">工作胜任度：对岗位专业知识匹配度及精通度（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">风险管控：对工作中公司商务、法律管控度考核（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">贡献度：对公司可持续性发展有合理化建议，个人持续成长学习能力等（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">创新执行力：工作中运用创新思维、新方法，及时精准贯彻执行单位安排的任务（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">工作效率：工作时间内保质保量完成公司下达的工作计划（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td rowspan="4">3</td>
<td rowspan="4">工作成绩考核</td>
<td colspan="4">任务达成：工作成绩考核（满分5分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">成本控制：工作任务中的各项费用、物资、时间成本管控（满分5分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">岗位意识：本职工作整体认知及达成效果（满分5分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">岗位规划：岗位长远规划及执行情况等（满分5分）</td>
<td colspan="2">5</td>
<td colspan="2">5</td>
<td colspan="2">5</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td rowspan="2">增减分项</td>
<td colspan="4">主管加分</td>
<td colspan="2">5</td>
<td colspan="2">5</td>
<td colspan="2">5</td>
</tr>
<tr>
<td colspan="4">主管减分</td>
<td colspan="2">5</td>
<td colspan="2">5</td>
<td colspan="2">5</td>
</tr>
<tr>
<td colspan="6">总结</td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="6">综合的烦恼</td>
<td colspan="6"></td>
</tr>
</table>
<table border="1" width="100%" height="100%" >
<tr>
<td colspan="1">序号</td>
<td colspan="1">处理人</td>
<td colspan="1">处理结果</td>
<td colspan="3">处理意见</td>
<td colspan="2">签名</td>
<td colspan="2">附件</td>
<td colspan="2">结束时间</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">经理</td>
<td colspan="1">同意</td>
<td colspan="3">-</td>
<td colspan="2">签名</td>
<td colspan="2">附件</td>
<td colspan="2">2023/03/34</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">经理</td>
<td colspan="1">同意</td>
<td colspan="3">-</td>
<td colspan="2">签名</td>
<td colspan="2">附件</td>
<td colspan="2">2023/03/34</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">经理</td>
<td colspan="1">同意</td>
<td colspan="3">-</td>
<td colspan="2">签名</td>
<td colspan="2">附件</td>
<td colspan="2">2023/03/34</td>
</tr>
</table>
</div>`,
properties: [ //表头
// {field: 'id', displayName: '地区', columnSize: `10%`},
// {field: 'text', displayName: '确认跳闸条数',columnSize: `65%`},
// {field: 'num', displayName: '误报条数'},
// {field: 'powerOutageTotalNum', displayName: '跳闸总条数'},
// {field: 'powerOutageErrorIndex', displayName: '误报指数', columnSize: `10%`},
],
type: 'json',
gridHeaderStyle: 'border: 1px solid #000;text-align:center',
gridStyle: 'border: 1px solid #000;text-align:center',
style: ' span {color :red ;width: 300px;border: 1px solid #000; display: flex; }' // 表格样式
})
}
return{
jsonPrint,
name2
}
}
}
</script>
<style>
</style>效果展示
现在线不是双线吗 如果你想让他变成单线的话，在table后边加上一句
cellpadding="0" cellspacing="0" style="border-collapse:collapse" 就可以了
好了三种说完了 欢迎提出不足 也欢迎交流，希望对你有帮助，
------------------------------------------------------------------------------------------------------------------------------
完整案例展示
<template>
<div>
<table width="100%" height="100%" border="1">
<tr>
<td colspan="1">1</td>
<td colspan="1">员工姓名</td>
<input v-model="name" style="color: red; width: 100px" />
<td colspan="3">员工部门</td>
<input v-model="department" style="color: red; width: 100px" />
</tr>
</table>
<table width="100%" height="100%" border="1">
<tr>
<td colspan="1">2</td>
<td colspan="1">所在职位</td>
<input v-model="position" style="color: red; width: 100px" />
<td colspan="3">考核吐槽项目</td>
<input v-model="message" style="color: red; width: 100px" />
</tr>
</table>
<table width="100%" height="100%" border="1">
<tr>
<td colspan="1">3</td>
<td colspan="1">a</td>
<input type="number" v-model="a" style="color: red; width: 100px" />
<td colspan="1">*</td>
<td colspan="1">b</td>
<input type="number" v-model="b" style="color: red; width: 100px" />
<td colspan="3">是否满足( > 1593)</td>
<td colspan="3">{{ this.list }}</td>
</tr>
</table>
<button @click="jsonPrint">打印</button>
</div>
</template>
<script lang="ts">
import printJS from "print-js";
export default {
data() {
return {
fraction: '', //分数
name: "", //名字
department: '', //部门
message: "", //吐槽
position: "", //职位
a:'', //分数1
b:'' //分数2
};
},
computed: {
// 计算分数总数
num() {
return this.a * this.b ;
},
// 改变吐槽展现形式
reverseMessage() {
return this.message.split("")
// return this.message.split("").reverse().join("");
},
// list 是判断num的满足条件
list() {
if (this.num > 1593) {
return "满足";
} else {
return "不满足";
}
},
},
methods: {
jsonPrint() {
printJS({
printable: [], //表格的数据
header: `<div style="display: flex;flex-direction: column;text-align: center">
<table border="1" width="100%" height="100%" >
<tr>
<!-- colspan跨n列 -->
<td colspan="12">学生作业考核评价表</td>
</tr>
<tr>
<td colspan="2">员工姓名</td>
<td colspan="2" >${this.name}</td>
<td colspan="1">部门</td>
<td colspan="3">${this.department}</td>
<td colspan="2">所在职位</td>
<td colspan="2">${this.position}</td>
</tr>
<tr>
<td colspan="3">考核吐槽项目</td>
<td colspan="3">${this.reverseMessage}</td>
<td colspan="1">考核分数</td>
<td colspan="5"> ${this.num}</td>
</tr>
<tr>
<td colspan="4">考核结果</td>
<td colspan="8">${this.list}</td>
</tr>
</table>
<table border="1" width="100%" height="100%">
<tr>
<td colspan="1">序号</td>
<td colspan="1">项目</td>
<td colspan="4">考核标准评分</td>
<td colspan="2">自我评分</td>
<td colspan="2">老师评分</td>
<td colspan="3">综合评分</td>
</tr>
<tr>
<td rowspan="4">1</td>
<td rowspan="4">考勤状况及态度考核</td>
<td colspan="4">出勤情况：满勤，无请假迟到早退等情况（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">工作积极性：主动承担分内工作，对本人职责范围内的工作无推诿（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">责任意识：本职工作有责任心，及时完成交付的工作，无拖延（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="4">协作与配合：与上下级，同事工作配合度（满分10分）</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
<td colspan="2">7</td>
</tr>
</table>
</div>`,
properties: [
//表头
// {field: 'id', displayName: '地区', columnSize: `10%`},
// {field: 'text', displayName: '确认跳闸条数',columnSize: `65%`},
// {field: 'num', displayName: '误报条数'},
// {field: 'powerOutageTotalNum', displayName: '跳闸总条数'},
// {field: 'powerOutageErrorIndex', displayName: '误报指数', columnSize: `10%`},
],
type: "json",
gridHeaderStyle: "border: 1px solid #000;text-align:center",
gridStyle: "border: 1px solid #000;text-align:center",
style:
" span {color :red ;width: 300px;border: 1px solid #000; display: flex; }", // 表格样式
});
},
},
};
</script>
<style>
</style>
------------------------------------------------------------------------------------------------------------------------------
三 。 答疑解惑 请仔细阅读
问题 ： 如何调整页面大小 如何进行多页分布 调整页面布局 纸张大小等
答 ： 你需要点击打印 打印效果页面下边会有更多设置（如下图） 打开更多设置 根据自己情况调节 ，你要是想分多页打印可以在 下边调整页面缩放状态 然后第一页放不下就会到第二页去 你可以进行页面状态的控制的 我下边有演示 可以看一下
问题 ： 如何进行分页设置
答 ： 可以在创建页面的时候定好每页大小以及整体的打印状态 也可以在更多设置里边更改页面缩放值 和页边距 就可以达到一下效果
（1）没有调整状态全在一页 没有分布
（2）在设置调整页面状态分布成了两页 （第一页 和 第二页 ）
页眉删除
3289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
