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

vue2实现打印票据功能print-js组件库 和window.print()_vue实现小票打印功能

作者：盐析白兔 | 2024-02-18 05:32:43

赞

踩

vue实现小票打印功能

1、安装依赖：

  1. //安装print-js
  2. npm install print-js --save
  3. 或
  4. yarn add print-js --save

2、引入依赖：

！！！main.js全局引入或者单页面局部引入：

import printJS from 'print-js'

3、实现效果图：

4、实现过程：案例代码在最后

 给打印的HTML添加id名：

  1. <div style="width: 700px; padding-top: 22px;" id='printBill'>
  2.         .....
  3. </div>

原生js方法：推荐原生打印方法很全博客_小何开发的博客-CSDN博客

  1. mounted() {
  2. 	window.addEventListener('beforeprint', () => {
  3. 	    // 打印开始时触发
  4. 	    this.isLoading = this.$loading({
  5. 		    lock: true,
  6. 		    text: '加载中',
  7. 	    	spinner: 'el-icon-loading',
  8. 		    background: 'rgba(0, 0, 0, 0.7)'
  9. 	    });
  10. 	    //打印开始时隐藏不必要显示的样式
  11.     	// this.isBorder = 'none'
  12.     })
  13. 	window.addEventListener('afterprint', () => {
  14. 		// 打印结束是触发
  15. 		this.isLoading.close();
  16. 		//打印结束恢复必要显示的样式
  17. 		// this.isBorder = '1px solid #000000'
  18. 	})
  19. },
  20. methods: {
  21. 	//原生的打印
  22. 	printAll() {
  23. 	    // const printHTML = document.querySelector('#printBill').innerHTML
  24. 		// // 将打印的区域赋值，进行打印 这种会出现多余的空白页
  25. 		// window.document.body.innerHTML = printHTML
  26. 		// window.print() // 调用window打印方法
  27. 		// window.location.reload() // 打印完成后重新加载页面
  28. 		const printHTML = document.querySelector('#printBill')
  29. 		window.document.body.innerHTML = "";
  30. 		// 将打印的区域赋值，进行打印  解决上面赋值方法
  31. 		window.document.body.appendChild(printHTML);
  32. 		window.print() // 调用window打印方法
  33. 		window.location.reload() // 打印完成后重新加载页面
  34. 	},
  35. }
  1. <style lang="scss" scoped>
  2. 	::v-deep .el-textarea__inner {
  3. 		border: none;
  4. 	}
  5.  
  6. 	@media print {
  7. 		@page {
  8. 			//landscape横向,portrait;纵向，如果不设置，则页面有横向和纵向的选择框 
  9. 			// size: A4 portrait;
  10. 			//国家标准公文页边距 GB/T 9704-2012
  11. 			// margin: 3.7cm 2.6cm 3.5cm;
  12. 			margin: 4mm 10mm;
  13. 		}
  14. 	}
  15. </style>

print-js组件库使用：推荐参考Print.js javascript库 实现页面打印 - 简书

  1. //打印
  2. billPrintClick() {
  3. 	setTimeout(function() {
  4. 	    const style = '@page {margin:0 10mm};' //打印时去掉眉页眉尾
  5. 	    printJS({
  6. 	    	printable: 'printBill', // 标签元素id
  7. 	    	type: 'html',
  8. 	    	header: '',
  9. 	    	targetStyles: ['*'],
  10. 	    	scanStyles: true, //打印必须加上，不然页面上的css样式无效
  11. 	    	style
  12. 	    });
  13.     }, 100)
  14. },

代码：（全） ：

  1. <template>
  2. 	<div style="min-height: 720px;" class="column center">
  3. 		<div style="width: 700px; padding-top: 22px;" id='printBill'>
  4. 			<div style="font-size: 13px;color: #000000;">
  5. 				<div style="width: 100%;text-align: center;margin-top: 30px;font-size: 20px;">{{title}}</div>
  6. 				<div style="margin-top: 12px; width: 100%;" class="row flex-end">
  7. 					<div class="row">({{year}})：<span style="color: red;font-weight: 600;letter-spacing: 3px;">{{id}}</span>
  8. 					</div>
  9. 				</div>
  10. 				<div style="margin-top: 10px;" class="row space-between">
  11. 					<div class="flex1">
  12. 						付款单位：<input v-model="PayerUnit" placeholder=""
  13. 							style="border: none;width: 140px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
  14. 					</div>
  15. 					<div class="flex1">
  16. 						<input v-model="year" placeholder=""
  17. 							style="border: none;width: 50px;background-color: #fff;line-height: 25px;text-align: center;"></input>
  18. 						<span>年</span>
  19. 						<input v-model="month" placeholder=""
  20. 							style="border: none;width: 50px;background-color: #fff;line-height: 25px;text-align: center;"></input>
  21. 						<span>月</span>
  22. 						<input v-model="day" placeholder=""
  23. 							style="border: none;width: 50px;background-color: #fff;line-height: 25px;text-align: center;"></input>
  24. 						<span>日</span>
  25. 					</div>
  26. 					<div class="flex1 row flex-end">支票号：<input v-model="ChequeNumber" placeholder=""
  27. 							style="border: none;width: 140px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
  28. 					</div>
  29. 				</div>
  30. 				<div style="margin-top:10px;line-height: 50px;">
  31. 					<table align="center" style="width: 100%;border-collapse: collapse;">
  32. 						<tr>
  33. 							<th style="width: 150px; letter-spacing: 20px;" :style="{border:isBorder}" align="center" valign="middle">
  34. 								项目</th>
  35. 							<th style="width: 360px; letter-spacing: 20px;" :style="{border:isBorder}" align="center" valign="middle">
  36. 								内容</th>
  37. 							<th style="width: 190px; letter-spacing: 20px;" :style="{border:isBorder}" align="center" valign="middle">
  38. 								金额</th>
  39. 						</tr>
  40. 						<tr style="line-height: 150px;">
  41. 							<td style="" :style="{border:isBorder}" align="center" valign="middle">
  42. 								<div class="row center">
  43. 									<el-input type="textarea" :rows="10" placeholder="" v-model="project" resize='none'
  44. 										style="border: none;"></el-input>
  45. 								</div>
  46. 							</td>
  47. 							<td style="" :style="{border:isBorder}" align="center" valign="middle">
  48. 								<div class="row center">
  49. 									<el-input type="textarea" :rows="10" placeholder="" v-model="content" resize='none'
  50. 										style="border: none;"></el-input>
  51. 								</div>
  52. 							</td>
  53. 							<td style="" :style="{border:isBorder}" align="center" valign="middle">
  54. 								<div class="row center">
  55. 									<el-input type="textarea" :rows="10" placeholder="" v-model="money" resize='none'
  56. 										style="border: none;"></el-input>
  57. 								</div>
  58. 							</td>
  59. 						</tr>
  60. 						<tr style="" :style="{border:isBorder}">
  61. 							<td align="center" valign="middle">
  62. 								<div>
  63. 									金额合计(大写)：
  64. 								</div>
  65. 							</td>
  66. 							<td align="center" valign="middle" style="padding-right: 10px;">
  67. 								<input v-model="sum" placeholder="请输入金额合计(大写)"
  68. 									style="border: none;width: 100%;background-color: #fff;font-size: 18px;line-height: 40px;padding-left: 5px;"></input>
  69. 							</td>
  70. 							<td style="padding: 0 10px 0 5px;" :style="{border:isBorder}" align="center" valign="middle">
  71. 								<input v-model="sumNumber" placeholder=""
  72. 									style="border: none;width: 100%;background-color: #fff;font-size: 18px;line-height: 40px;padding-left: 5px;text-align: center;"></input>
  73. 							</td>
  74. 						</tr>
  75. 					</table>
  76. 				</div>
  77. 				<div style="margin-top: 10px;" class="row space-between">
  78. 					<div class="flex1">收款单位(盖章)：</div>
  79. 					<div class="flex1">收款人：<input v-model="payee" placeholder=""
  80. 							style="border: none;width: 140px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
  81. 					</div>
  82. 					<div class="flex1 row flex-end">交款人：<input v-model="Payer" placeholder=""
  83. 							style="border: none;width: 120px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
  84. 					</div>
  85. 				</div>
  86. 				<div style="margin: 10px 0 0" class="row flex-end">
  87. 					打印时间：2023-05-24 16:45
  88. 				</div>
  89. 			</div>
  90. 		</div>
  91. 		<div class="row flex-end" style="padding-right: 100px;margin-top: 20px;">
  92. 			<el-button type="primary" @click="printAll">js原生打印</el-button>
  93. 			<el-button type="success" @click="billPrintClick">printJS打印</el-button>
  94. 		</div>
  95. 	</div>
  96. </template>
  97.  
  98. <script>
  99. 	import printJS from 'print-js'
  100. 	export default {
  101. 		data() {
  102. 			return {
  103. 				isBorder:'1px solid #000000',
  104. 				isLoading: null,
  105. 				title: '*******资金往来结算票据',
  106. 				year: '2023',
  107. 				month: '1',
  108. 				day: '1',
  109. 				id: '211000101251',
  110. 				ChequeNumber: '454454548212655995',
  111. 				sum: '壹佰捌拾圆整',
  112. 				sumNumber: '180.00',
  113. 				PayerUnit: '单位名称',
  114. 				payee: '章小鱼',
  115. 				Payer: '章小鱼',
  116. 				project: '餐补、住房补贴、出行补贴',
  117. 				content: '早餐、午餐、晚餐、住房补贴、出行补贴',
  118. 				money: '60.00/天、70.00/天、50.00/天',
  119. 			}
  120. 		},
  121. 		mounted() {
  122. 			window.addEventListener('beforeprint', () => {
  123. 				// 打印开始时触发
  124. 				this.isLoading = this.$loading({
  125. 					lock: true,
  126. 					text: '加载中',
  127. 					spinner: 'el-icon-loading',
  128. 					background: 'rgba(0, 0, 0, 0.7)'
  129. 				});
  130. 				//打印开始时隐藏不必要显示的样式
  131. 				// this.isBorder = 'none'
  132. 			})
  133. 			window.addEventListener('afterprint', () => {
  134. 				// 打印结束是触发
  135. 				this.isLoading.close();
  136. 				//打印结束恢复必要显示的样式
  137. 				// this.isBorder = '1px solid #000000'
  138. 			})
  139. 		},
  140. 		methods: {
  141. 			//原生的打印
  142. 			printAll() {
  143. 				// const printHTML = document.querySelector('#printBill').innerHTML
  144. 				// // 将打印的区域赋值，进行打印 这种会出现多余的空白页
  145. 				// window.document.body.innerHTML = printHTML
  146. 				// window.print() // 调用window打印方法
  147. 				// window.location.reload() // 打印完成后重新加载页面
  148. 				const printHTML = document.querySelector('#printBill')
  149. 				window.document.body.innerHTML = "";
  150. 				// 将打印的区域赋值，进行打印  解决上面赋值方法
  151. 				window.document.body.appendChild(printHTML);
  152. 				window.print() // 调用window打印方法
  153. 				window.location.reload() // 打印完成后重新加载页面
  154. 			},
  155. 			//打印
  156. 			billPrintClick() {
  157. 				setTimeout(function() {
  158. 					const style = '@page {margin:0 10mm};' //打印时去掉眉页眉尾
  159. 					printJS({
  160. 						printable: 'printBill', // 标签元素id
  161. 						type: 'html',
  162. 						header: '',
  163. 						targetStyles: ['*'],
  164. 						scanStyles: true, //打印必须加上，不然页面上的css样式无效
  165. 						style
  166. 					});
  167. 				}, 100)
  168. 			},
  169. 		}
  170. 	}
  171. </script>
  172.  
  173. <style lang="scss" scoped>
  174. 	::v-deep .el-textarea__inner {
  175. 		border: none;
  176. 	}
  177.  
  178. 	@media print {
  179. 		@page {
  180. 			//landscape横向,portrait;纵向，如果不设置，则页面有横向和纵向的选择框 
  181. 			// size: A4 portrait;
  182. 			//国家标准公文页边距 GB/T 9704-2012
  183. 			// margin: 3.7cm 2.6cm 3.5cm;
  184. 			margin: 4mm 10mm;
  185. 		}
  186. 	}
  187. </style>

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

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