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; }' // 表格样式
})
},
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69985427/viewspace-2728146/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
没有了~
请登录后发表评论
登录
全部评论
