当前位置:编程学习 > JS >>

ElementUi 使用PrintJs 实现基础打印功能

代码简单实现:

<el-button size="small" plain type="primary" @click="CreateOneFormPage">打印易做图</el-button>
<el-table
id="printJS-form"
ref="table"
:data="purchase_item"
show-summary
:summary-method="getSummaries"
style="width: 100%"
>
<el-table-column type="index" width="50" />
<el-table-column prop="sku_sn" label="商品编码" width="160">
<template slot-scope="{ row }">
<span v-if="row.sku_sn">{{ row.sku_sn }}</span>
<span v-else-if="row.sku_sn">{{ row.item_sn }}</span>
</template>
</el-table-column>
......略过
</el-table>
import print from 'print-js'
/**
     * 打印
     */
CreateOneFormPage() {
print({ printable: 'printJS-form',
type: 'html',
header: '采购单',
headerStyle: 'text-align:center;color:#f00;width:100%;border:1px #000 solid;',
// targetStyles: ['border', 'padding: 15px'],
scanStyles: false,
style: 'table tr td,th { border-collapse: collapse;padding: 15px;border:1px #000 solid; }' // 表格样式
})
},
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,