问题

• 使用vue-print-nb打印el表格的时候会出现各种奇怪的样式问题，不好解决
  • 缩放问题：表格太长后面会显示不下出现滚动条。
  • 表格错位问题：表格头与表格体会出现错位
  • 表格边框问题：表格的边框1px不会不显示的问题。
• 使用 html2canvas+printJs 可以完美解决这些问题
• 安装
  • npm install --save html2canvas
  • npm install --save print-js
• html部分

<!-- 直接调用方法，html2canvas转换成canvas然后通过printJs打印 -->
<button @click="onPrint()">
    <span>打印</span>
</button>
<el-table ref="gatprintArea">
    <el-table-column>
    </el-table-column>
</el-table>

• js部分

function onPrint() {
          const printContent = this.$refs.gatprintArea.$el; //获取上面的ref对应的组件实例
          // 获取dom 宽度 高度
          const width = printContent.clientWidth + 2; //如果有边框可适当增加2~10之间的画布大小
          const height = printContent.clientHeight + 2;//如果有边框可适当增加2~10之间的画布大小
          // 创建一个canvas节点
          const canvas = document.createElement('canvas');

          const scale = 10; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
          canvas.width = width * scale; // 定义canvas 宽度 * 缩放
          canvas.height = height * scale; // 定义canvas高度 *缩放
          canvas.style.width = width * scale + 'px';
          canvas.style.height = height * scale + 'px';
          canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale

          const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
          const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度

          html2canvas(printContent, {
            canvas,
            backgroundColor: null,
            useCORS: true,
            windowHeight: document.body.scrollHeight,
            scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
            scrollY: -scrollTop
          }).then((canvas) => {
            const url = canvas.toDataURL('image/png')
            printJs({
              printable: url,
              type: 'image',
              documentTitle: '', // 标题
              style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚
            })
          }).catch(err=>{
            console.error(err);
          })
        }