devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3 vben admin +ts + printJS 打印 的三种方式 页面分布 日期页眉取消_vue3 print-js

作者：IT小白 | 2024-02-18 05:34:18

赞

踩

vue3 print-js

（下边答疑解惑  讲解了如何分布多页面   如何调整纸张大小  ） 

安装

  1. To install using npm:
  2.  
  3.  
  4.   npm install print-js --save
  5.  
  6. To install using yarn:
  7.  
  8.  
  9.   yarn add print-js

最近的新需求，是打印表格 查了好多地方，然后总结了三种方法

无论哪种方式都需要下载 然后引入

地址：https://printjs.crabbly.com/

   import printJS from 'print-js';

方法一：主要是打印页面上的所有东西  ，页面有什么他就打印什么，标签除外，但是 这个没有选择性，

  1. <template>
  2. 	<div class="print-div" id="print_area">
  3. 		<Row type="flex" class="example-body">
  4. 			<Col :flex="2" class="demo-uni-col dark_deep" v-for="item in list" :key="item.id">
  5. 			<p>{{ item.text }}</p>
  6. 			<p>
  7. 				<input type="number" class="inputNumber" :min="0" :max="10" v-model="item.input">
  8. 				<!-- <input type="number" class="inputNumber" :min="0" :max="10" v-model="from1[item.num]" /> -->
  9. 			</p>
  10. 			</Col>
  11. 		</Row>
  12. 		<button @click="printSomething">打印</button>
  13. 	</div>
  14. </template>
  15. <script lang="ts">
  16. import printJS from 'print-js';
  17. import { Row } from 'ant-design-vue';
  18. import { Col } from 'ant-design-vue';
  19. import { reactive } from 'vue'
  20. export default {
  21. 	components: {
  22. 		Row,
  23. 		Col,
  24. 	},
  25. 	setup() {
  26. 		const list: any = reactive([
  27. 			{
  28. 				id: 1,
  29. 				text: '出勤情况：满勤，无请假迟到早退等情况（满分10分）',
  30. 				num: '出勤情况',
  31. 				input: ''
  32. 			},
  33. 			{
  34. 				id: 2,
  35. 				text: '工作积极性：主动承担分内工作，对本人职责范围内的工作无推诿（满分10分）',
  36. 				num: '工作积极性',
  37. 				input: ''
  38.  
  39. 			},
  40. 			{
  41. 				id: 3,
  42. 				text: '责任意识：本职工作有责任心，及时完成交付的工作，无拖延（满分10分）',
  43. 				num: '责任意识',
  44. 				input: ''
  45. 			},
  46. 			{
  47. 				id: 4,
  48. 				text: '协作与配合：与上下级，同事工作配合度（满分10分）',
  49. 				num: '协作与配合',
  50. 				input: ''
  51. 			},
  52. 		])
  53. 		function printSomething() {
  54. 			// 此处的style即为打印时的样式
  55. 			const style = '@page {  } ' + '@media print { .print-div{ padding:8px;background-color:#cccccc;line-height:12px } .red{ color:#f00} .green{color:green}';
  56. 			printJS({
  57. 				printable: 'print_area',
  58. 				type: 'html',
  59. 				style: style,// 亦可使用引入的外部css;
  60. 				scanStyles: false
  61. 			})
  62. 		}
  63. 		return {
  64. 			list,
  65. 			printSomething
  66. 		}
  67. 	}
  68.  
  69. }
  70. </script>
  71. <style>
  72.  
  73. </style>

print包裹在哪就从哪里开始进行渲染

效果展示 

 

 -------------------------------------------------------------------------------------------------------------------------------

方法二 ： 这个主要是在下边的打印列表进行数据的导入，然后在进行输出，但是格式相对来说比较固定，你需要在他给你的属性里边定义数据

  1.    <template>
  2. 	<div>
  3.     <button @click="jsonPrint">打印</button>
  4. 	</div> 
  5.    </template>
  6.    <script lang="ts">
  7.    import printJS from 'print-js';
  8.    import { Row } from 'ant-design-vue';
  9.    import { Col } from 'ant-design-vue';
  10.    import { reactive , ref } from 'vue'
  11.    export default {
  12. 	components:{
  13. 		Row,
  14. 		Col,
  15. 	},
  16. 	setup(){
  17. 		const nav: any = reactive([{
  18. 			id: 1,
  19. 			text: '任务达成：工作成绩考核（满分5分））',
  20. 			num: '任务达成',
  21. 			input:'',
  22. 			powerOutageTotalNum:'powerOutageTotalNum'
  23. 		},
  24. 		{
  25. 			id: 2,
  26. 			text: '成本控制：工作任务中的各项费用、物资、时间成本管控（满分5分）',
  27. 			num: '成本控制',
  28. 			input:'',
  29. 			powerOutageTotalNum:'powerOutageTotalNum'
  30. 		},
  31. 		{
  32. 			id: 3,
  33. 			text: '岗位意识：本职工作整体认知及达成效果（满分5分）',
  34. 			num: '岗位意识',
  35. 			input:'',
  36. 			powerOutageTotalNum:'powerOutageTotalNum'
  37. 		},
  38. 		{
  39. 			id: 4,
  40. 			text: '岗位规划：岗位长远规划及执行情况等（满分5分）',
  41. 			num: '岗位规划',
  42. 			input:'',
  43. 			powerOutageTotalNum:'powerOutageTotalNum'
  44. 		},
  45. 		]);
  46. 		function jsonPrint() {
  47. 			printJS({
  48.                 printable: nav, //表格的数据
  49.                 properties: [ //表头
  50.                     {field: 'id', displayName: '地区', columnSize: `10%`},
  51.                     {field: 'text', displayName: '确认跳闸条数',columnSize: `65%`},
  52.                     {field: 'num', displayName: '误报条数'},
  53.                     {field: 'input', displayName: '跳闸总条数'},
  54.                     {field: 'powerOutageTotalNum', displayName: '误报指数', columnSize: `10%`},
  55.                 ],
  56.                 type: 'json',
  57.                 gridHeaderStyle: 'border: 1px solid #000;text-align:center',
  58.                 gridStyle: 'border: 1px solid #000;text-align:center',
  59. 				style: ' span {color :red ;width: 300px;border: 1px solid #000;	display: flex; }' // 表格样式
  60. 			})
  61.         }
  62. 		return{
  63. 			nav,
  64. 			jsonPrint,
  65. 		}
  66. 	}
  67.    }
  68.    </script>
  69.    <style>
  70.    </style>

但是样式相对来说比较固定

效果展示

方式三 ： 在header里边进行定义  然后在里边进行数据的排版修改等 样式相对来说灵活  你可以在里边选择自己需要的样式  内容 然后在进行渲染

  1.  
  2.    <template>
  3. 	<div>
  4. 		<Button type="primary" @click="jsonPrint">打印</Button>
  5. 	</div> 
  6.    </template>
  7.    <script lang="ts">
  8.    import printJS from 'print-js';
  9.    import { Button } from '/@/components/Button';
  10.    export default {
  11. 	components:{
  12. 		Button,
  13. 	 },
  14. 	setup(){
  15.         let name2="周阿狗"
  16.  
  17. 		function jsonPrint() {
  18. 			printJS({
  19.                 printable: [], //表格的数据
  20.                 header: `<div style="display: flex;flex-direction: column;text-align: center">
  21. 						<table border="1" width="100%" height="100%"  >
  22. 							<tr>
  23. 								<!-- colspan跨n列 -->
  24. 								<td colspan="12">学生作业考核评价表</td>
  25. 							</tr>
  26. 							<tr>
  27. 								<td colspan="2">员工姓名</td>
  28. 								<td colspan="2">${name2}</td>
  29. 								<td colspan="1">部门</td>	
  30. 								<td colspan="3">德玛西亚</td>
  31. 								<td colspan="2">所在职位</td>	
  32. 								<td colspan="2">射手</td>
  33. 							</tr>
  34. 							<tr>
  35. 								<td colspan="3">考核时间段</td>
  36. 								<td colspan="3">2022/08/14</td>
  37. 								<td colspan="1">--</td>
  38. 								<td colspan="5">2022/08/14</td>
  39. 							</tr>
  40. 							<tr>
  41. 								<td colspan="4">老师考核</td>
  42. 								<td colspan="8">良好：80分≤考核分＜90</td>
  43. 							</tr>
  44. 							</table>
  45. 							<table border="1" width="100%" height="100%"  >
  46. 								<tr>
  47. 								<td colspan="1">序号</td>
  48. 								<td colspan="1">项目</td>
  49. 								<td colspan="4">考核标准评分</td>	
  50. 								<td colspan="2">自我评分</td>
  51. 								<td colspan="2">老师评分</td>	
  52. 								<td colspan="3">综合评分</td>
  53. 							</tr>
  54. 							<tr>
  55. 								<td rowspan="4">1</td>
  56. 								<td rowspan="4">考勤状况及态度考核</td>
  57. 								<td colspan="4">出勤情况：满勤，无请假迟到早退等情况（满分10分）</td>
  58. 								<td colspan="2">7</td>
  59. 								<td colspan="2">7</td>
  60. 								<td colspan="2">7</td>
  61. 							</tr>
  62. 							<tr>
  63. 								<td colspan="4">工作积极性：主动承担分内工作，对本人职责范围内的工作无推诿（满分10分）</td>
  64. 								<td colspan="2">7</td>
  65. 								<td colspan="2">7</td>
  66. 								<td colspan="2">7</td>
  67. 							</tr>
  68. 							<tr>
  69. 								<td colspan="4">责任意识：本职工作有责任心，及时完成交付的工作，无拖延（满分10分）</td>
  70. 								<td colspan="2">7</td>
  71. 								<td colspan="2">7</td>
  72. 								<td colspan="2">7</td>
  73. 							</tr>
  74. 							<tr>
  75. 								<td colspan="4">协作与配合：与上下级，同事工作配合度（满分10分）</td>
  76. 								<td colspan="2">7</td>
  77. 								<td colspan="2">7</td>
  78. 								<td colspan="2">7</td>
  79. 							</tr>
  80. 							<tr>
  81. 								<td rowspan="5">2</td>
  82. 								<td rowspan="5">个人素质和工作能力考核</td>
  83. 								<td colspan="4">工作胜任度：对岗位专业知识匹配度及精通度（满分10分）</td>
  84. 								<td colspan="2">7</td>
  85. 								<td colspan="2">7</td>
  86. 								<td colspan="2">7</td>
  87. 							</tr>
  88. 							<tr>
  89. 								<td colspan="4">风险管控：对工作中公司商务、法律管控度考核（满分10分）</td>
  90. 								<td colspan="2">7</td>
  91. 								<td colspan="2">7</td>
  92. 								<td colspan="2">7</td>
  93.  
  94. 							</tr>
  95. 							<tr>
  96. 								<td colspan="4">贡献度：对公司可持续性发展有合理化建议，个人持续成长学习能力等（满分10分）</td>
  97. 								<td colspan="2">7</td>
  98. 								<td colspan="2">7</td>
  99. 								<td colspan="2">7</td>
  100.  
  101. 							</tr>
  102. 							<tr>
  103. 								<td colspan="4">创新执行力：工作中运用创新思维、新方法，及时精准贯彻执行单位安排的任务（满分10分）</td>
  104. 								<td colspan="2">7</td>
  105. 								<td colspan="2">7</td>
  106. 								<td colspan="2">7</td>
  107.  
  108. 							</tr>
  109. 							<tr>
  110. 								<td colspan="4">工作效率：工作时间内保质保量完成公司下达的工作计划（满分10分）</td>
  111. 								<td colspan="2">7</td>
  112. 								<td colspan="2">7</td>
  113. 								<td colspan="2">7</td>
  114.  
  115. 							</tr>
  116. 							<tr>
  117. 								<td rowspan="4">3</td>
  118. 								<td rowspan="4">工作成绩考核</td>
  119. 								<td colspan="4">任务达成：工作成绩考核（满分5分）</td>
  120. 								<td colspan="2">7</td>
  121. 								<td colspan="2">7</td>
  122. 								<td colspan="2">7</td>
  123. 							</tr>
  124. 							<tr>
  125. 								<td colspan="4">成本控制：工作任务中的各项费用、物资、时间成本管控（满分5分）</td>
  126. 								<td colspan="2">7</td>
  127. 								<td colspan="2">7</td>
  128. 								<td colspan="2">7</td>
  129.  
  130. 							</tr>
  131. 							<tr>
  132. 								<td colspan="4">岗位意识：本职工作整体认知及达成效果（满分5分）</td>
  133. 								<td colspan="2">7</td>
  134. 								<td colspan="2">7</td>
  135. 								<td colspan="2">7</td>
  136.  
  137. 							</tr>
  138. 						
  139. 							<tr>
  140. 								<td colspan="4">岗位规划：岗位长远规划及执行情况等（满分5分）</td>
  141. 								<td colspan="2">5</td>
  142. 								<td colspan="2">5</td>
  143. 								<td colspan="2">5</td>
  144.  
  145. 							</tr>
  146. 							<tr>
  147. 								<td rowspan="2">4</td>
  148. 								<td rowspan="2">增减分项</td>
  149. 								<td colspan="4">主管加分</td>
  150. 								<td colspan="2">5</td>
  151. 								<td colspan="2">5</td>
  152. 								<td colspan="2">5</td>
  153. 							</tr>
  154. 							<tr>
  155. 								<td colspan="4">主管减分</td>
  156. 								<td colspan="2">5</td>
  157. 								<td colspan="2">5</td>
  158. 								<td colspan="2">5</td>
  159. 							</tr>
  160. 							<tr>
  161. 								<td colspan="6">总结</td>
  162. 								<td colspan="2"></td>
  163. 								<td colspan="2"></td>
  164. 								<td colspan="2"></td>
  165. 							</tr>
  166. 							<tr>
  167. 								<td colspan="6">综合的烦恼</td>
  168. 								<td colspan="6"></td>
  169. 							</tr>
  170. 							</table>
  171. 							<table border="1" width="100%" height="100%"  >
  172. 								<tr>
  173. 								<td colspan="1">序号</td>
  174. 								<td colspan="1">处理人</td>
  175. 								<td colspan="1">处理结果</td>	
  176. 								<td colspan="3">处理意见</td>
  177. 								<td colspan="2">签名</td>
  178. 								<td colspan="2">附件</td>
  179. 								<td colspan="2">结束时间</td>
  180. 							</tr>
  181. 							<tr>
  182. 								<td colspan="1">1</td>
  183. 								<td colspan="1">经理</td>
  184. 								<td colspan="1">同意</td>	
  185. 								<td colspan="3">-</td>
  186. 								<td colspan="2">签名</td>
  187. 								<td colspan="2">附件</td>
  188. 								<td colspan="2">2023/03/34</td>
  189. 							</tr>
  190. 							<tr>
  191. 								<td colspan="1">1</td>
  192. 								<td colspan="1">经理</td>
  193. 								<td colspan="1">同意</td>	
  194. 								<td colspan="3">-</td>
  195. 								<td colspan="2">签名</td>
  196. 								<td colspan="2">附件</td>
  197. 								<td colspan="2">2023/03/34</td>
  198. 							</tr>
  199. 							<tr>
  200. 								<td colspan="1">1</td>
  201. 								<td colspan="1">经理</td>
  202. 								<td colspan="1">同意</td>	
  203. 								<td colspan="3">-</td>
  204. 								<td colspan="2">签名</td>
  205. 								<td colspan="2">附件</td>
  206. 								<td colspan="2">2023/03/34</td>
  207. 							</tr>
  208. 							</table>
  209.                     </div>`,
  210.                 properties: [ //表头
  211.                     // {field: 'id', displayName: '地区', columnSize: `10%`},
  212.                     // {field: 'text', displayName: '确认跳闸条数',columnSize: `65%`},
  213.                     // {field: 'num', displayName: '误报条数'},
  214.                     // {field: 'powerOutageTotalNum', displayName: '跳闸总条数'},
  215.                     // {field: 'powerOutageErrorIndex', displayName: '误报指数', columnSize: `10%`},
  216.                 ],
  217.                 type: 'json',
  218.                 gridHeaderStyle: 'border: 1px solid #000;text-align:center',
  219.                 gridStyle: 'border: 1px solid #000;text-align:center',
  220. 				style: ' span {color :red ;width: 300px;border: 1px solid #000;	display: flex; }' // 表格样式
  221. 			})
  222.         }
  223. 		return{
  224. 			jsonPrint,
  225. 			name2
  226. 		}
  227. 	}
  228.    }
  229.    </script>
  230.    
  231.    <style>
  232.     </style>

效果展示

现在线不是双线吗  如果你想让他变成单线的话，在table后边加上一句

 cellpadding="0" cellspacing="0" style="border-collapse:collapse"

就可以了

好了三种说完了  欢迎提出不足  也欢迎交流，希望对你有帮助，

------------------------------------------------------------------------------------------------------------------------------

完整案例展示 

  1.  
  2.    <template>
  3.   <div>
  4.     <table width="100%" height="100%" border="1">
  5.       <tr>
  6.         <td colspan="1">1</td>
  7.         <td colspan="1">员工姓名</td>
  8.         <input  v-model="name" style="color: red; width: 100px" />
  9.         <td colspan="3">员工部门</td>
  10.         <input v-model="department" style="color: red; width: 100px" />
  11.       </tr>
  12.     </table>
  13.  
  14.     <table width="100%" height="100%" border="1">
  15.       <tr>
  16.         <td colspan="1">2</td>
  17.         <td colspan="1">所在职位</td>
  18.         <input v-model="position" style="color: red; width: 100px" />
  19.         <td colspan="3">考核吐槽项目</td>
  20.         <input  v-model="message" style="color: red; width: 100px" />
  21.       </tr>
  22.     </table>
  23.  
  24. 	<table width="100%" height="100%" border="1">
  25.       <tr>
  26.         <td colspan="1">3</td>
  27.         <td colspan="1">a</td>
  28.         <input type="number" v-model="a" style="color: red; width: 100px" />
  29. 		<td colspan="1">*</td>
  30. 		<td colspan="1">b</td>
  31.         <input type="number" v-model="b" style="color: red; width: 100px" />
  32.        <td colspan="3">是否满足( > 1593)</td>
  33.         <td colspan="3">{{ this.list }}</td>
  34.       </tr>
  35.     </table>
  36.     <button @click="jsonPrint">打印</button>
  37.   </div>
  38. </template>
  39.    <script lang="ts">
  40. import printJS from "print-js";
  41. export default {
  42.   data() {
  43.     return {
  44. 	  fraction: '',       //分数 
  45. 	  name: "",           //名字
  46.       department: '',     //部门
  47.       message: "",        //吐槽
  48.       position: "",       //职位
  49. 	  a:'',               //分数1
  50. 	  b:''                //分数2
  51.     };
  52.   },
  53.   computed: {
  54. 	// 计算分数总数
  55.     num() {
  56.       return this.a * this.b ;
  57.     },
  58. 	// 改变吐槽展现形式
  59.     reverseMessage() {
  60.       return this.message.split("")
  61.     //   return this.message.split("").reverse().join("");
  62.  
  63.     },
  64.  
  65. 	// list  是判断num的满足条件
  66.     list() {
  67.       if (this.num > 1593) {
  68.         return "满足";
  69.       } else {
  70.         return "不满足";
  71.       }
  72.     },
  73.   },
  74.  
  75.   methods: {
  76.     jsonPrint() {
  77.       printJS({
  78.         printable: [], //表格的数据
  79.         header: `<div style="display: flex;flex-direction: column;text-align: center">
  80. 						<table border="1" width="100%" height="100%"  >
  81. 							<tr>
  82. 								<!-- colspan跨n列 -->
  83. 								<td colspan="12">学生作业考核评价表</td>
  84. 							</tr>
  85. 							<tr>
  86. 								<td colspan="2">员工姓名</td>
  87. 								<td colspan="2" >${this.name}</td>
  88. 								<td colspan="1">部门</td>	
  89. 								<td colspan="3">${this.department}</td>
  90. 								<td colspan="2">所在职位</td>	
  91. 								<td colspan="2">${this.position}</td>
  92. 							</tr>
  93. 							<tr>
  94. 								<td colspan="3">考核吐槽项目</td>
  95. 								<td colspan="3">${this.reverseMessage}</td>
  96. 								<td colspan="1">考核分数</td>
  97. 								<td colspan="5"> ${this.num}</td>
  98. 							</tr>
  99. 							<tr>
  100. 								<td colspan="4">考核结果</td>
  101. 								<td colspan="8">${this.list}</td>
  102. 							</tr>
  103. 							</table>
  104. 							<table border="1" width="100%" height="100%">
  105. 								<tr>
  106. 								<td colspan="1">序号</td>
  107. 								<td colspan="1">项目</td>
  108. 								<td colspan="4">考核标准评分</td>	
  109. 								<td colspan="2">自我评分</td>
  110. 								<td colspan="2">老师评分</td>	
  111. 								<td colspan="3">综合评分</td>
  112. 							</tr>
  113. 							<tr>
  114. 								<td rowspan="4">1</td>
  115. 								<td rowspan="4">考勤状况及态度考核</td>
  116. 								<td colspan="4">出勤情况：满勤，无请假迟到早退等情况（满分10分）</td>
  117. 								<td colspan="2">7</td>
  118. 								<td colspan="2">7</td>
  119. 								<td colspan="2">7</td>
  120. 							</tr>
  121. 							<tr>
  122. 								<td colspan="4">工作积极性：主动承担分内工作，对本人职责范围内的工作无推诿（满分10分）</td>
  123. 								<td colspan="2">7</td>
  124. 								<td colspan="2">7</td>
  125. 								<td colspan="2">7</td>
  126. 							</tr>
  127. 							<tr>
  128. 								<td colspan="4">责任意识：本职工作有责任心，及时完成交付的工作，无拖延（满分10分）</td>
  129. 								<td colspan="2">7</td>
  130. 								<td colspan="2">7</td>
  131. 								<td colspan="2">7</td>
  132. 							</tr>
  133. 							<tr>
  134. 								<td colspan="4">协作与配合：与上下级，同事工作配合度（满分10分）</td>
  135. 								<td colspan="2">7</td>
  136. 								<td colspan="2">7</td>
  137. 								<td colspan="2">7</td>
  138. 							</tr>
  139. 							
  140. 							</table>
  141. 						
  142.                     </div>`,
  143.         properties: [
  144.           //表头
  145.           // {field: 'id', displayName: '地区', columnSize: `10%`},
  146.           // {field: 'text', displayName: '确认跳闸条数',columnSize: `65%`},
  147.           // {field: 'num', displayName: '误报条数'},
  148.           // {field: 'powerOutageTotalNum', displayName: '跳闸总条数'},
  149.           // {field: 'powerOutageErrorIndex', displayName: '误报指数', columnSize: `10%`},
  150.         ],
  151.         type: "json",
  152.         gridHeaderStyle: "border: 1px solid #000;text-align:center",
  153.         gridStyle: "border: 1px solid #000;text-align:center",
  154.         style:
  155.           " span {color :red ;width: 300px;border: 1px solid #000;	display: flex; }", // 表格样式
  156.       });
  157.     },
  158.   },
  159. };
  160. </script>
  161.    
  162.    <style>
  163. </style>

------------------------------------------------------------------------------------------------------------------------------ 

三 。 答疑解惑     请仔细阅读

问题  ： 如何调整页面大小    如何进行多页分布    调整页面布局 纸张大小等 

答      ： 你需要点击打印   打印效果页面下边会有更多设置（如下图）   打开更多设置 根据自己情况调节  ，你要是想分多页打印可以在  下边调整页面缩放状态  然后第一页放不下就会到第二页去 你可以进行页面状态的控制的 我下边有演示 可以看一下

问题  ：  如何进行分页设置

答      ：   可以在创建页面的时候定好每页大小以及整体的打印状态   也可以在更多设置里边更改页面缩放值  和页边距  就可以达到一下效果  

（1）没有调整状态全在一页 没有分布 

 （2）在设置调整页面状态分布成了两页  （第一页 和 第二页 ）

页眉删除    

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/105239
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号