这种叫我前端来生成直接打印，有做过的吗？怎么可以一下子弄成一行3个，问题是中间还要有间隔。

这种叫我前端来生成直接打印，有做过的吗？

3 个回答

得票最新

马嘉伦

874412

发布于
11 月 4 日广东

更新于
11 月 4 日

✓ 已被采纳

刚好我做标签打印机比较多。

你如果使用网页的话是无法直接通过USB连接标签打印机的，需要通过蓝牙或者串口插件，或者本地插件，可能是可以的。

无论使用何种连接，大多数标签打印机都是使用的TSPL2这个协议，这个是原始协议：
http://www.bar-tech.com.tw/eng/download/12790046025_TSPL_TSPL...

要通过厂家SDK的话，就只能使用本地平台的开发方式了，不能使用web。

补充：题主已说明存在本地插件，所以直接看TSPL2协议写指令即可。

this_MyFunction

42522247

发布于
11 月 4 日湖北

这个打印机厂家会有一个接口文档吧，我记得我们之前做资产标识打印好像用过，太久了不记得。就是传一个对象过去。
这个不会用到页面打印比如vue-print-nb打印组件。问问某某医院采购，然后再问打印机厂家。

Seven

587116

发布于
11 月 4 日广东

更新于
11 月 4 日

1.如果你是通过后台添加多个，然后前台去查询的话，后台界面可以这样写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>票据排版</title>
    <style>
        .ticket {
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;
            width: 200px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
        }
        .ticket-category {
            font-size: 18px;
            font-weight: bold;
        }
        .ticket-number {
            font-size: 16px;
            margin-top: 5px;
        }
        .barcode {
            margin-top: 10px;
            width: 180px; /* 确保条形码宽度不会超出容器 */
            height: 60px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
</head>
<body>
    <div>
        <label for="category">票据类型:</label>
        <input type="text" id="category" placeholder="例如：成人票">
        <label for="number">票据编号:</label>
        <input type="text" id="number" placeholder="例如：24-03970">
        <button onclick="addTicket()">添加票据</button>
    </div>
    <div id="tickets-container"></div>

    <script>
        const tickets = [];
        const container = document.getElementById('tickets-container');

        function addTicket() {
            const category = document.getElementById('category').value;
            const number = document.getElementById('number').value;

            if (category && number) {
                tickets.push({ category, number });
                renderTickets();
            }
        }

        function renderTickets() {
            container.innerHTML = '';
            tickets.forEach(ticket => {
                const ticketHTML = `
                    <div class="ticket">
                        <div class="ticket-category">${ticket.category}</div>
                        <div class="ticket-number">${ticket.number}</div>
                        <svg class="barcode" id="barcode-${ticket.number}"></svg>
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', ticketHTML);

                JsBarcode(`#barcode-${ticket.number}`, ticket.number, {
                    format: 'CODE128',
                    displayValue: true,
                    fontSize: 16,
                    width: 1.5,
                    height: 60
                });
            });
        }
    </script>
</body>
</html>

2.如果是页面直接生成多个可以这样子写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>票据排版</title>
    <style>
        .ticket {
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;
            width: 200px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
        }
        .ticket-category {
            font-size: 18px;
            font-weight: bold;
        }
        .ticket-number {
            font-size: 16px;
            margin-top: 5px;
        }
        .barcode {
            margin-top: 10px;
            width: 180px; /* 确保条形码宽度不会超出容器 */
            height: 60px;
        }

      /*为打印设置专门的CSS样式，以确保打印效果更美观。例如，隐藏不需要打印的元素，调整布局等*/
    @media print {
        /* 隐藏不需要打印的元素 */
        button {
            display: none;
        }
        /* 调整打印布局 */
        .ticket {
            page-break-inside: avoid;
        }
    }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
</head>
<body>
    <div id="tickets-container"></div>
    <button onclick="window.print()">打印票据</button>

    <script>
        const tickets = [
            { category: '成人票', number: '24-03970' },
            { category: '儿童票', number: '24-03971' },
            { category: '学生票', number: '24-03972' },
            { category: '老年票', number: '24-03973' }
        ];

        const container = document.getElementById('tickets-container');

        function renderTickets() {
            let ticketsHTML = '';
            tickets.forEach(ticket => {
                ticketsHTML += `
                    <div class="ticket">
                        <div class="ticket-category">${ticket.category}</div>
                        <div class="ticket-number">${ticket.number}</div>
                        <svg class="barcode" id="barcode-${ticket.number}"></svg>
                    </div>
                `;
            });

            container.innerHTML = ticketsHTML;

            tickets.forEach(ticket => {
                JsBarcode(`#barcode-${ticket.number}`, ticket.number, {
                    format: 'CODE128',
                    displayValue: true,
                    fontSize: 16,
                    width: 1.5,
                    height: 60
                });
            });
        }

        window.onload = renderTickets;
    </script>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

这种叫我前端来生成直接打印，有做过的吗？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

前端有没有办法实现页面截图？

为什么这个动画一直在抖动?

在计算机中如何翻译`pattern`？