用Vue组件实现小票打印功能 唤起打印机

用Vue组件实现小票打印功能

在实际开发中，我们经常需要打印一些小票、发票等信息，这时候就需要一个方便易用的打印工具。本文将介绍如何使用Vue组件来实现小票打印功能，并且使用vue3-print-nb库来实现打印。

代码实现

以下是实现小票打印功能的Vue组件代码：

html复制代码
<template>
    <!-- 使用DragModal组件来实现可拖动的模态框 -->
    <DragModal v-model:visible="newVisible" title="打印小票" :footer="null">
        <!-- 打印内容容器 -->
        <div class="print-container" id="printMe">
            <!-- 小票标题 -->
            <div class="print-title">装车小票</div>
            <!-- 使用a-space组件来控制元素间的垂直间距 -->
            <a-space direction="vertical">
                <!-- 单据号 -->
                <a-space align="start">
                    <div class="label">单据号：</div>
                    <div class="value">{{ info.roughWeightSn }}</div>
                </a-space>
                <!-- 供货单位 -->
                <a-space align="start">
                    <div class="label">供货单位：</div>
                    <div class="value">{{ info.secondCompanyName }}</div>
                </a-space>
                <!-- 物料 -->
                <a-space align="start">
                    <div class="label">物料：</div>
                    <div class="value">{{ info.materialName }}</div>
                </a-space>
                <!-- 装货通道 -->
                <a-space align="start">
                    <div class="label">装货通道：</div>
                    <div class="value">{{ info.placeName }}</div>
                </a-space>
                <!-- 收货单位 -->
                <a-space align="start">
                    <div class="label">收货单位：</div>
                    <div class="value">{{ info.customerName }}</div>
                </a-space>
                <!-- 皮重时间 -->
                <a-space align="start">
                    <div class="label">皮重时间：</div>
                    <div class="value">{{ info.tareWeightTime }}</div>
                </a-space>
                <!-- 皮重 -->
                <a-space align="start">
                    <div class="label">皮重：</div>
                    <div class="value">{{ info.tareWeight }}吨</div>
                </a-space>
                <!-- 毛重时间 -->
                <a-space align="start">
                    <div class="label">毛重时间：</div>
                    <div class="value">{{ info.roughWeightTime }}</div>
                </a-space>
                <!-- 毛重 -->
                <a-space align="start">
                    <div class="label">毛重：</div>
                    <div class="value">{{ info.roughWeight }}吨</div>
                </a-space>
                <!-- 净重 -->
                <a-space align="start">
                    <div class="label">净重：</div>
                    <div class="value">{{ info.roughWeight - info.tareWeight }}吨</div>
                </a-space>
                <!-- 实际净重 -->
                <a-space align="start">
                    <div class="label">实际净重：</div>
                    <div class="value">{{ info.netWeight }}吨</div>
                </a-space>
                <!-- 扣重 -->
                <a-space align="start">
                    <div class="label">扣重：</div>
                    <div class="value">{{ info.buckleWeight }}吨</div>
                </a-space>
                <!-- 车号 -->
                <a-space align="start">
                    <div class="label">车号：</div>
                    <div class="value">{{ info.carNumber }}</div>
                </a-space>
                <!-- 司机 -->
                <a-space align="start">
                    <div class="label">司机：</div>
                    <div class="value">{{ info.driverName }}</div>
                </a-space>
                <!-- 打印时间 -->
                <a-space align="start">
                    <div class="label">打印时间：</div>
                    <div class="value">{{ dayjs().format("YYYY-MM-DD HH:mm:ss") }}</div>
                </a-space>
            </a-space>
        </div>

        <!-- 打印和取消按钮 -->
        <a-space style="display: flex; justify-content: center; align-items: center; margin-top: 24px" :size="36">
            <a-button v-print="printObj" type="primary">打印</a-button>
            <a-button @click="newVisible = false">取消</a-button>
        </a-space>
    </DragModal>
</template>

<script lang="ts" setup>
import { computed, watch } from "vue";
import dayjs from "dayjs";
import print from "vue3-print-nb";

const VPrint = print;
// 打印配置对象
const printObj = {
    id: "printMe", // 要打印的容器id
    popTitle: "小票打印", // 打印预览窗口标题
    // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 额外的头部信息，如设置打印语言为中文
};
const props = defineProps({
    visible: { type: Boolean, default: false }, // 控制模态框显示与隐藏的属性
    info: { default: Object }, // 小票信息对象
});
const emits = defineEmits(["update:visible"]);
const newVisible = computed({
    get() {
        return props.visible;
    },
    set(value) {
        return emits("update:visible", value);
    },
});
// 监听props.visible的变化
watch(
    () => props.visible,
    (val) => {
        if (val) {
            console.log(props.info); // 打印小票信息
        }
    },
);
</script>

<style lang="less">
.print-container {
    .print-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 18px;
        margin-left: 96px;
        margin-bottom: 16px;
    }
    .label {
        font-size: 18px;
    }
    .value {
        font-size: 18px;
    }
}
</style>

代码说明

这个组件包含一个模态框，模态框内部有一个打印内容容器，其中包含了小票的各种信息。点击"打印"按钮可以打印小票，点击"取消"按钮可以关闭模态框。

代码中使用了vue3-print-nb库来实现打印功能，并且通过watch监听props.visible的变化，在模态框显示时打印小票信息。

样式部分使用了Less语法，定义了一些样式规则来美化打印内容容器的展示效果。

总结

本文介绍了如何使用Vue组件和vue3-print-nb库来实现小票打印功能。通过组合使用多个Vue组件和第三方库，我们可以快速地构建出一个功能强大、易用的小票打印工具。