寻找打印功能的插件
- vue3-print-nb
- print-js
vue3-print-nb 使用情况
实际使用时表格打印不全,直接漏了几个字段;字体的样式也没有;
寻找解决方法时发现要改源码。vue-print-nb使用和解决打印element表格不全问题
当我进入node_modules找到 vue3-print-nb 时发现文件目录和模块都变了…
询问版本,无果
print-js 使用情况
实际使用时表格打印不全,直接漏了几个字段;
查看配置项后发现可以使用maxWidth进行调整,于是解决了表格字段残缺的问题
新的问题出现了,表格边框的缺失
寻找解决方法时发现要改源码。 Vue——printjs打印el-table,echarts等打印不全,异常解决
当我进入node_modules找到 print-js 时发现文件目录和模块都变了…
询问版本,无果
也可以结合html2Canvas使用,但博主说有bug。windows上面打印预览没有任何问题,但是在Mac上面所有的字体间距均被放大,于是没有使用该方法。
最后我还是从CSS的层面优化了这个bug
调整CSS
.printContainer {
-webkit-print-color-adjust: exact;
/* 打印时表格上边框会消失 貌似是因为 使用伪元素的缘故 */
::v-deep(.el-table__inner-wrapper::after) {
height: 0px !important;
}
/* 使用自己的表格上边框 */
::v-deep(.el-table__inner-wrapper) {
border-top: 1px solid #e5e7eb;
}
/* 打印时边框太小会被挤没,那让边框变大点就好了*/
::v-deep(.el-table__cell) {
border-right: 2px solid #e5e7eb;
}
}
<!-- 打印的内容 -->
<div id="org-sku-print" class="printContainer">
.....
</div>
const openPrint = () => {
printJS({
printable: 'org-sku-print',
type: 'html',
documentTitle: title.value,
maxWidth: 1000, // 最大宽度
targetStyles: ['*'],
style: ''
})
}