javascript - 打印到纸张的特定区域 C#

Question

我想要实现的目标

我正在开发一个程序，我想将名称打印到标签上，标签位于 8 1/2 * 14 纸张上的 4 * 2 列中，可以将其剥离并粘贴到其他东西上。 。

我有什么

到目前为止，当我单击“打印”时，会弹出一个模态表单，其中包含 4 * 2 中的 8 个按钮，代表纸张上的标签。

我需要什么

现在，当我点击其中任何一个按钮时， 我想传递它们的位置或硬编码到页面上特定位置的按钮 ID，因此，如果我单击该行中的第二个按钮，那么我的打印将位于第二行。本质上，选择按钮代表您将打印的标签。

(我来解释一下) 假设单击第一个按钮，例如将我的名字发送到打印在纸上的位置

x: 0
y: 0

假设单击了第二个按钮，我想发送我的名字以打印在 纸张位于位置

x: 5 (five being halfway)
y: 0

按钮三将导致打印发生在

x:0
y:-5 

Answer 1

在您的 View 中，创建一个表来表示标签网格并设置 <td> 的样式。基于页面/标签大小的元素，并在第一个表格单元格中添加要打印的内容。

然后使用jquery处理每个表格单元格的点击事件，将内容重新定位到适当的标签。

最后添加一个@media print样式以防止打印页面上的其他元素。

您的 View 可能看起来像(对于 3 x 2 标签网格)

<table>
    <tr>
        <td class="active">
            <div id="content">@Model.SomeProperty</div>
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<div id="message">Click on a table cell to position the content</div>

和脚本

var content = $('#content');
$('td').click(function() {
    $('td').removeClass('active');
    $(this).append(content).addClass('active');
})

和CSS

table {
    border-collapse: collapse;
    table-layout:fixed;
}
td {
    box-sizing: border-box;
    border: dashed grey 1px;
    width: 150px; /*adjust to suit your label size*/
    height: 75px; /*adjust to suit your label size*/
    vertical-align: top;
}
td.active { /*adds an extra visual indicator*/
    border: solid black 1px; 
}
#content {
    padding: 5px;
}
#message {
    margin-top: 25px;
    color: red;
}
@media print
{
    td, td.active {
    border: none;
}
    #message {
        display: none;
    }
}

引用this fiddle一个工作示例