如何通过USB用TSC TTP 244 Pro打印75mm×50mm带二维码的表格？

我已通过以下JavaScript代码生成带合计重量的表格，且二维码已准备完成（效果见下图）：

const data = [["1.3","NORMAL OD","FINOTEX","5376","13.040"],["1.3","NORMAL OD","FINOTEX","5376","13.040"],["1.3","NORMAL OD","FINOTEX","5376","13.040"],["1.3","NORMAL OD","FINOTEX","5376","13.040"]]

let table = `<table border="1">
    <thead>
        <tr>
            <th>Size</th>
            <th>OD</th>
            <th>Brand</th>
            <th>Weight</th>
        </tr>
    </thead>
    <tbody>`;
let total_weight = 0;

data.forEach(element => {
    total_weight += parseFloat(element[3]);
    table += `
        <tr>
            <td>${element[0]}</td>
            <td>${element[1]}</td>
            <td>${element[2]}</td>
            <td>${parseFloat(element[3])}</td>
        </tr>`
});

table += `
        <tr>
            <td colspan=3>Total Weight</td>
            <td>${total_weight}</td>
        </tr>
    </tbody>
</table>`       

document.getElementById('table').innerHTML = table;

现需通过USB连接的TSC TTP 244 Pro热敏打印机，将包含该表格与二维码的整个div按75mm×50mm的尺寸打印，请问该如何实现？

1. 配置打印机纸张规格 #

先确保TSC打印机驱动已安装完成，在系统中设置自定义纸张：

• 打开系统设备和打印机，找到TSC TTP 244 Pro
• 右键选择打印首选项，切换到页面设置标签
• 选择自定义纸张类型，输入宽度75mm、高度50mm，保存为新规格（比如命名为"75x50mm"）
• 将该规格设为打印机默认纸张

2. 适配打印样式的CSS #

给包含表格和二维码的父div添加打印专属样式，避免页面其他内容干扰，同时适配标签尺寸：

/* 给目标容器加class="print-container" */
@media print {
    body * {
        visibility: hidden;
    }
    .print-container, .print-container * {
        visibility: visible;
    }
    .print-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 71mm; /* 留2mm边距防止内容裁切 */
        height: 46mm;
        padding: 2mm;
        font-size: 10px; /* 可根据内容调整，确保表格和二维码完整显示 */
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 2px;
        text-align: center;
    }
}

3. 触发打印的两种方式 #

方式一：浏览器原生打印（简单快捷） #

通过JS调用浏览器打印功能，直接使用已配置好的打印机规格：

function printLabel() {
    window.print();
}

点击页面按钮调用该函数即可，打印时确认选择TSC打印机，并确保纸张规格选之前创建的"75x50mm"。

方式二：TSC SDK精准控制（适合复杂场景） #

如果需要更精准的打印控制，可使用TSC官方JavaScript SDK：

1. 从TSC官网下载配套的TSCLIB.js文件并引入
2. 编写打印逻辑（需搭配html2canvas将HTML元素转为图片）：

// 初始化打印机USB连接
function initPrinter() {
    TSC.openPort("USB");
    TSC.sendCommand("SIZE 75 mm, 50 mm");
    TSC.sendCommand("GAP 0 mm, 0 mm"); // 根据纸卷实际间隙调整，无间隙则设为0
}

// 生成并打印标签
function printLabelWithSDK() {
    initPrinter();
    TSC.sendCommand("CLS"); // 清除缓存

    // 将打印容器转为图片
    html2canvas(document.querySelector('.print-container')).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        // 计算图片打印参数（mm转像素，1mm≈3.5278像素）
        const imgWidthPx = Math.round(71 * 3.5278);
        const imgHeightPx = Math.round(46 * 3.5278);
        // 发送图片打印指令（2mm边距位置）
        TSC.sendCommand(`BITMAP 2,2,${imgWidthPx},${imgHeightPx},"${imgData}"`);
        // 打印1份
        TSC.sendCommand("PRINT 1,1");
        TSC.closePort();
    });
}

4. 测试调整 #

打印测试页，检查内容是否完整、位置是否居中，根据实际效果调整CSS字体大小、边距或SDK中的参数，直到符合要求。

内容的提问来源于stack exchange，提问作者ZISHAN Altamash