vue3 打印功能，踩坑记录

寻找打印功能的插件

• 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: ''
  })
}