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

已于 2023-08-09 09:05:54 修改
阅读量3.9k 收藏 15
点赞数 1
文章标签： javascript vue node.js npm yarn
于 2023-06-08 14:44:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75870706/article/details/131107156
版权

1、安装依赖：

//安装print-js
npm install print-js --save
或
yarn add print-js --save

2、引入依赖：

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

import printJS from 'print-js'

3、实现效果图：

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

 给打印的HTML添加id名：

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

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

mounted() {
	window.addEventListener('beforeprint', () => {
	    // 打印开始时触发
	    this.isLoading = this.$loading({
		    lock: true,
		    text: '加载中',
	    	spinner: 'el-icon-loading',
		    background: 'rgba(0, 0, 0, 0.7)'
	    });
	    //打印开始时隐藏不必要显示的样式
    	// this.isBorder = 'none'
    })
	window.addEventListener('afterprint', () => {
		// 打印结束是触发
		this.isLoading.close();
		//打印结束恢复必要显示的样式
		// this.isBorder = '1px solid #000000'
	})
},
methods: {
	//原生的打印
	printAll() {
	    // const printHTML = document.querySelector('#printBill').innerHTML
		// // 将打印的区域赋值，进行打印 这种会出现多余的空白页
		// window.document.body.innerHTML = printHTML
		// window.print() // 调用window打印方法
		// window.location.reload() // 打印完成后重新加载页面
		const printHTML = document.querySelector('#printBill')
		window.document.body.innerHTML = "";
		// 将打印的区域赋值，进行打印  解决上面赋值方法
		window.document.body.appendChild(printHTML);
		window.print() // 调用window打印方法
		window.location.reload() // 打印完成后重新加载页面
	},
}
<style lang="scss" scoped>
	::v-deep .el-textarea__inner {
		border: none;
	}

	@media print {
		@page {
			//landscape横向,portrait;纵向，如果不设置，则页面有横向和纵向的选择框 
			// size: A4 portrait;
			//国家标准公文页边距 GB/T 9704-2012
			// margin: 3.7cm 2.6cm 3.5cm;
			margin: 4mm 10mm;
		}
	}
</style>

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

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

代码：（全） ：

<template>
	<div style="min-height: 720px;" class="column center">
		<div style="width: 700px; padding-top: 22px;" id='printBill'>
			<div style="font-size: 13px;color: #000000;">
				<div style="width: 100%;text-align: center;margin-top: 30px;font-size: 20px;">{{title}}</div>
				<div style="margin-top: 12px; width: 100%;" class="row flex-end">
					<div class="row">({{year}})：<span style="color: red;font-weight: 600;letter-spacing: 3px;">{{id}}</span>
					</div>
				</div>
				<div style="margin-top: 10px;" class="row space-between">
					<div class="flex1">
						付款单位：<input v-model="PayerUnit" placeholder=""
							style="border: none;width: 140px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
					</div>
					<div class="flex1">
						<input v-model="year" placeholder=""
							style="border: none;width: 50px;background-color: #fff;line-height: 25px;text-align: center;"></input>
						<span>年</span>
						<input v-model="month" placeholder=""
							style="border: none;width: 50px;background-color: #fff;line-height: 25px;text-align: center;"></input>
						<span>月</span>
						<input v-model="day" placeholder=""
							style="border: none;width: 50px;background-color: #fff;line-height: 25px;text-align: center;"></input>
						<span>日</span>
					</div>
					<div class="flex1 row flex-end">支票号：<input v-model="ChequeNumber" placeholder=""
							style="border: none;width: 140px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
					</div>
				</div>
				<div style="margin-top:10px;line-height: 50px;">
					<table align="center" style="width: 100%;border-collapse: collapse;">
						<tr>
							<th style="width: 150px; letter-spacing: 20px;" :style="{border:isBorder}" align="center" valign="middle">
								项目</th>
							<th style="width: 360px; letter-spacing: 20px;" :style="{border:isBorder}" align="center" valign="middle">
								内容</th>
							<th style="width: 190px; letter-spacing: 20px;" :style="{border:isBorder}" align="center" valign="middle">
								金额</th>
						</tr>
						<tr style="line-height: 150px;">
							<td style="" :style="{border:isBorder}" align="center" valign="middle">
								<div class="row center">
									<el-input type="textarea" :rows="10" placeholder="" v-model="project" resize='none'
										style="border: none;"></el-input>
								</div>
							</td>
							<td style="" :style="{border:isBorder}" align="center" valign="middle">
								<div class="row center">
									<el-input type="textarea" :rows="10" placeholder="" v-model="content" resize='none'
										style="border: none;"></el-input>
								</div>
							</td>
							<td style="" :style="{border:isBorder}" align="center" valign="middle">
								<div class="row center">
									<el-input type="textarea" :rows="10" placeholder="" v-model="money" resize='none'
										style="border: none;"></el-input>
								</div>
							</td>
						</tr>
						<tr style="" :style="{border:isBorder}">
							<td align="center" valign="middle">
								<div>
									金额合计(大写)：
								</div>
							</td>
							<td align="center" valign="middle" style="padding-right: 10px;">
								<input v-model="sum" placeholder="请输入金额合计(大写)"
									style="border: none;width: 100%;background-color: #fff;font-size: 18px;line-height: 40px;padding-left: 5px;"></input>
							</td>
							<td style="padding: 0 10px 0 5px;" :style="{border:isBorder}" align="center" valign="middle">
								<input v-model="sumNumber" placeholder=""
									style="border: none;width: 100%;background-color: #fff;font-size: 18px;line-height: 40px;padding-left: 5px;text-align: center;"></input>
							</td>
						</tr>
					</table>
				</div>
				<div style="margin-top: 10px;" class="row space-between">
					<div class="flex1">收款单位(盖章)：</div>
					<div class="flex1">收款人：<input v-model="payee" placeholder=""
							style="border: none;width: 140px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
					</div>
					<div class="flex1 row flex-end">交款人：<input v-model="Payer" placeholder=""
							style="border: none;width: 120px;background-color: #fff;line-height: 25px;padding-left: 5px;"></input>
					</div>
				</div>
				<div style="margin: 10px 0 0" class="row flex-end">
					打印时间：2023-05-24 16:45
				</div>
			</div>
		</div>
		<div class="row flex-end" style="padding-right: 100px;margin-top: 20px;">
			<el-button type="primary" @click="printAll">js原生打印</el-button>
			<el-button type="success" @click="billPrintClick">printJS打印</el-button>
		</div>
	</div>
</template>

<script>
	import printJS from 'print-js'
	export default {
		data() {
			return {
				isBorder:'1px solid #000000',
				isLoading: null,
				title: '*******资金往来结算票据',
				year: '2023',
				month: '1',
				day: '1',
				id: '211000101251',
				ChequeNumber: '454454548212655995',
				sum: '壹佰捌拾圆整',
				sumNumber: '180.00',
				PayerUnit: '单位名称',
				payee: '章小鱼',
				Payer: '章小鱼',
				project: '餐补、住房补贴、出行补贴',
				content: '早餐、午餐、晚餐、住房补贴、出行补贴',
				money: '60.00/天、70.00/天、50.00/天',
			}
		},
		mounted() {
			window.addEventListener('beforeprint', () => {
				// 打印开始时触发
				this.isLoading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				//打印开始时隐藏不必要显示的样式
				// this.isBorder = 'none'
			})
			window.addEventListener('afterprint', () => {
				// 打印结束是触发
				this.isLoading.close();
				//打印结束恢复必要显示的样式
				// this.isBorder = '1px solid #000000'
			})
		},
		methods: {
			//原生的打印
			printAll() {
				// const printHTML = document.querySelector('#printBill').innerHTML
				// // 将打印的区域赋值，进行打印 这种会出现多余的空白页
				// window.document.body.innerHTML = printHTML
				// window.print() // 调用window打印方法
				// window.location.reload() // 打印完成后重新加载页面
				const printHTML = document.querySelector('#printBill')
				window.document.body.innerHTML = "";
				// 将打印的区域赋值，进行打印  解决上面赋值方法
				window.document.body.appendChild(printHTML);
				window.print() // 调用window打印方法
				window.location.reload() // 打印完成后重新加载页面
			},
			//打印
			billPrintClick() {
				setTimeout(function() {
					const style = '@page {margin:0 10mm};' //打印时去掉眉页眉尾
					printJS({
						printable: 'printBill', // 标签元素id
						type: 'html',
						header: '',
						targetStyles: ['*'],
						scanStyles: true, //打印必须加上，不然页面上的css样式无效
						style
					});
				}, 100)
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .el-textarea__inner {
		border: none;
	}

	@media print {
		@page {
			//landscape横向,portrait;纵向，如果不设置，则页面有横向和纵向的选择框 
			// size: A4 portrait;
			//国家标准公文页边距 GB/T 9704-2012
			// margin: 3.7cm 2.6cm 3.5cm;
			margin: 4mm 10mm;
		}
	}
</style>

停留的章小鱼
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
银行票据打印模板
06-21
银行票据打印模板
vue中使用vue-print.js实现多页打印
11-21
本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装 下载 print.js https://github.com/zxc19890923/print/blob/master/print.js 在src目录下面创建plugins/pri
vue3项目中使用vxe-table的自定义打印方法实现打印发票功能
最新发布
jieyucx的博客
05-20 1512
vxe-table官方文档，全局安装教程$print({sheetName: '打印自定义模板',content: `我是合同`});可以接受一个配置对象作为参数。这个配置对象可以包含以下属性：sheetName：打印的工作表名称。style：自定义的CSS样式。content：打印的内容。
功能：vue：浏览器打印小票、打印参数配置
qq_43548684的博客
12-15 8156
小票打印~~打印能踩的坑都踩了~~不能踩的坑我也踩！！！因为头铁！！！
vue前端实现打印功能并约束纸张大小---调用浏览器打印功能打印页面部分元素并固定纸张大小
misschengispink的博客
10-16 1753
需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域，所以这里采用截图+新窗口打开打印去实现此需求。
vue打印功能vue-print-nb
qq_52031916的博客
05-12 1030
vue打印功能vue-print-nb
vue-print 打印功能票据文档VUE3
beiback的博客
03-31 1349
vue-print 打印功能票据文档VUE3 typescript
vue打印小票
rikimiao的博客
08-31 1014
vue打印小票
vue打印功能 手持终端打印小票，电脑连接打印机打印预览
rikimiao的博客
10-20 3115
手持终端打印小票，电脑连接打印机打印预览
记一次Electron+vue实现动态打印小票
qq_52965813的博客
07-26 3479
electron+vue3打印
通过Web打印超市一样的小票
04-21
通过Web打印超市一样的小票。测试可以使用。。。
vue 打印（模板套打）
01-08
vue 使用  print-template 生成pdf 打印 。支持生成二维码、条形码、文本、图片、线  安装 yarn add print-template 或 npm install print-template 内容类型 line 线条 barcode 条形码 qrcode 二维码 image 图片 text 文本 内容属性 通用 x 必须 所有类型  y 必须 所有类型  default 固定内容默认值 线条 【line】 length 线条长度 number orientation 线条方向   p 竖线 / l 横线 s
vue-print:基于vue-print-nb打印组件做的功能拓展
05-07
vue-print基于vue-print-nb打印组件的拓展功能,下载后放在项目中引用详情请看博客介绍Installmain.js文件引用import Print from './xxxx/vue-print-nb/src'Vue.use(Print);
vue-print-nb:Vue插件，打印！ 好的！
05-12
vue-print-nb 这是用于包装，简单，快速，方便，轻便的指令包装纸。 安装 Vue2版本： npm install vue-print-nb --save import Print from 'vue-print-nb' // Global instruction Vue . use ( Print ) ; //or // ...
vue-tables-2-Vue.js 2网格组件。-Vue.js开发
05-27
新发行版本2.0中的重大更改现已发布。 它引入了一种改进的机制来构建自定义...关于Vue Tables 2 Vue Tables 2的创建是为了向开发人员提供功能齐全的工具集，以便使用Vue.js创建漂亮而有用的数据表。 用于数百种商业沙发
WPF使用 Grid++ Report 模板打印票据、条码等。
G_lllll的博客
01-15 739
Grid++ Report 这个组件在我们开发过程中可以帮助我们实现一些报表票据的模板，你可以自由的的设计出你需要的格式。不管做票据，还是报表都是很简便明了的。当然，还有许多的报表组件,比如FineReport、FastReport等诸多报表组件。下面分享怎么使用Grid++ Report 实现票据打印。
关于Electron+Vue打印小票功能实现（最新）
qq_51091386的博客
11-14 1697
electron打印小票功能实现。
【vue】实现打印功能
热门推荐
SunPeng的博客
11-27 1万+
【vue】实现打印功能
vue2 使用vue-print-nb实现打印功能_vue-print-nb插件在手机上没有效果
01-05
以下是使用vue-print-nb插件实现打印功能的示例代码： 1. 首先，安装vue-print-nb插件： ```shell npm install vue-print-nb --save ``` 2. 在Vue项目的入口文件中引入vue-print-nb插件： ```javascript import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print) ``` 3. 在需要打印的组件中，使用v-print指令来触发打印功能： ```html <template> <div> <!-- 打印按钮 --> <button v-print="'printArea'">打印</button> <!-- 需要打印的内容 --> <div id="printArea"> <!-- 这里是需要打印的内容 --> </div> </div> </template> ``` 请注意，为了使打印功能在手机上生效，你需要确保以下几点： - 确保你的手机浏览器支持打印功能。 - 确保你的打印内容在手机上可见，不会被隐藏或溢出屏幕。 - 确保你的打印内容的样式在手机上正常显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值