打印功能vue 插件$print
1. 使用div进行布局-table表格调试会比较困难/ html部分
至于安装$print组件可以到百度上找、分享一下打印的想法。我使用的时候组件已经安装好,所有哈哈哈自行百度
<el-button
@click="handlePrint"
type="info"
size="mini"
icon="el-icon-printer"
>打印</el-button
>
<div style="display:none">
<div ref="stamp" style="width:100%;">
<div
v-for="(t, i) in pagenum"
:key="i"
class="content"
style="page-break-after: always;"
>
<div ref="headers" style="width: 100%;text-align: center;">
<div>
<span style="font-size: 24px;">分支机构名称</span><br />
<span style="font-size: 20px;">分销订单</span>
</div>
</div>
<hr />
<div ref="centers" style="margin: 0 auto;padding: 0;width: 100%;">
<ul
style="display: inline-block;display: flex;flex-wrap: wrap;padding: 0; margin:0;"
>
<li
style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
>
客户名称: <span>{
{ MainData.contactor }}</span>
</li>
<li
style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
>
联系电话 {
{ MainData.contacttel }}
</li>
<li
style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
>
单号 <span> {
{ MainData.billcode }}</span>
</li>