vue3-print-nb打印表单

1,098 阅读1分钟

vue3打印

//安装插件
npm install vue3-print-nb --save

//在main.ts 文件中引入
import Print from 'vue3-print-nb';
app.use(Print)

//代码
//这里是打印的配置项
const print = ref({
	id: 'printArea',//这里的id就是上面我们的打印区域id,实现指哪打哪
	popTitle: '彭泽县人民医院', // 打印配置页上方的标题
	extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
	preview: false, // 是否启动预览模式,默认是false
	previewTitle: '房屋维修单', // 打印预览的标题
	previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
	zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
	previewBeforeOpenCallback() {
		console.log('正在加载预览窗口!');
	}, // 预览窗口打开之前的callback
	previewOpenCallback() {
		console.log('已经加载完预览窗口,预览打开了!')
	}, // 预览窗口打开时的callback
	beforeOpenCallback() {
		console.log('开始打印之前!')
	}, // 开始打印之前的callback
	openCallback() {
		console.log('执行打印了!')
	}, // 调用打印时的callback
	closeCallback() {
		console.log('关闭了打印工具!')
	}, // 关闭打印的callback(无法区分确认or取消)
	clickMounted() {
		console.log('点击v-print绑定的按钮了!')
	},
})

image.png