AiDOPWarehouse/Web/src/views/system/print/component/hiprint/preview.vue

<template>
	<el-dialog v-model="state.dialogVisible" draggable :close-on-click-modal="false" :width="Number(state.width) + Number(8) + 'mm'">
		<div id="preview_content" ref="previewContentRef"></div>
		<template #footer>
			<el-button :loading="state.waitShowPrinter" type="primary" icon="ele-Printer" @click.stop="print">直接打印</el-button>
			<el-button type="primary" icon="ele-Printer" @click.stop="toPdf">导出PDF</el-button>
			<el-button key="close" @click="hideDialog"> 关闭 </el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue';

const state = reactive({
	dialogVisible: false,
	waitShowPrinter: false,
	width: 0, // 纸张宽 mm
	printData: {}, // 打印数据
	printType: 1, // 默认浏览器打印
	printParam: {
		printer: '', // 打印机名称
		title: '', // 打印任务名称
		color: false, // 是否打印颜色 默认 true
		copies: 1, // 打印份数 默认 1
	},
	// 打印参数
	hiprintTemplate: {} as any,
});

const previewContentRef = ref();

const showDialog = (hiprintTemplate: any, printData: {}, width = 210, printType = 1, printParam: { printer: ''; title: ''; color: false; copies: 1 }) => {
	state.dialogVisible = true;
	state.width = width;
	state.hiprintTemplate = hiprintTemplate;
	state.printData = printData;
	state.printParam = printParam;
	state.printType = printType;
	nextTick(() => {
		while (previewContentRef.value?.firstChild) {
			previewContentRef.value.removeChild(previewContentRef.value.firstChild);
		}
		const newHtml = hiprintTemplate.getHtml(printData);
		previewContentRef.value.appendChild(newHtml[0]);
	});
};

const print = () => {
	state.waitShowPrinter = true;
	debugger;
	// 判断是否已成功连接
	if (state.printType == 2) {
		// 注意：连接是异步的
		// 已连接
		// 获取打印机列表
		const printerList = state.hiprintTemplate.getPrinterList();

		let sfcz = printerList.some((item: any) => {
			return item.name == state.printParam.printer;
		});
		if (!sfcz) {
			alert('打印机不存在');
		} else {
			// 直接打印 将使用系统设置的 默认打印机
			state.hiprintTemplate.print2(state.printData, state.printParam);

			// 发送任务到打印机成功
			state.hiprintTemplate.on('printSuccess', function (e: any) {
				state.waitShowPrinter = false;
			});
			// 发送任务到打印机失败
			state.hiprintTemplate.on('printError', function (e: any) {
				state.waitShowPrinter = false;
				alert('打印失败：' + e);
			});
		}
	} else {
		state.hiprintTemplate.print(
			state.printData,
			{},
			{
				callback: () => {
					state.waitShowPrinter = false;
				},
			}
		);
	}
};

const toPdf = () => {
	state.hiprintTemplate.toPdf(state.printData, 'PDF文件');
};

const hideDialog = () => {
	state.dialogVisible = false;
};

defineExpose({ showDialog });
</script>

<style lang="less" scoped>
:deep(.ant-modal-body) {
	padding: 0px;
}

:deep(.ant-modal-content) {
	margin-bottom: 24px;
}
</style>