问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
寅春树
    1.3k11206457

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

    前端打印
    阅读 1.3k
    3 个回答
    得票最新
    头像
    马嘉伦
      874412
      ✓ 已被采纳

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

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

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

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

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

      头像
      this_MyFunction
        42522247

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

        头像
        Seven
          592116

          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>
          查看全部 3 个回答
          推荐问题
          宣传栏