el-table打印PDF预览，表头错位的解决方案

背景与需求

本例以vue2项目为例，vue3与react等同理。

有个项目需要打印的功能，网页使用vue2写的，主体内容为表格el-table，添加某个按钮，点击按钮时弹出PDF打印预览，示例如下：

需求分析

通常我们会使用vue-print-nb组件，通过一些配置即可实现需求，但是会出现一些奇怪的bug，比如：

• 表头错位
• 首页尾页多出一页
• 边框线不显示
• 表格的边框1px不会不显示的问题
• 某些边框变粗了……

以上问题会在下面解决！

解决方案

方案一：vue-print-nb插件

vue-print-nb是vue项目中用的比较广泛的打印预览插件，其npm地址如下：

vue-print-nb文档(https://www.npmjs.com/package/vue-print-nb)

安装

npm install vue-print-nb --save

引入

在main.js中引入并注册插件：

import Print from 'vue-print-nb'
Vue.use(Print)

使用

在需要的vue组件中使用：

<template>
  <div class="app-container">
    <el-button type="primary" size="medium" v-print="printObj">报表打印</el-button>

    <div id="printArea" ref="gatprintArea">
      打印区域，内容自定义
    </div>
    
  </div>
</template>

<script>
  export default {
   
   
    data() {
   
   
      return {
   
   
        printObj: {
   
   
          id: 'printArea', // 这里是要打印元素的ID
          popTitle: '&nbsp', // 打印的标题
        },
      };
    },
  };
</script>

通过上述代码，我们可以实现打印并预览PDF的效果，但是实际应用中会出现之前说的问题。
原图：
预览效果图：

可以看到，没有把完整的表格区域打印出来，而且表格的很多边框线没显示，我们给它添加一些样式，先让它能完整的打印出来:

  ::v-deep table {
   
   
    table-layout: auto;
  }
  ::v-deep .el-table__header-wrapper .el-table__header {
   
   
    width: 100% !important;
  }
  ::v