直接用【print-js】实现打印，有些样式不能正常识别。所以用html2canvas将dom转图片再实现打印兼容性才是最好的。
注意：利用html2canvas打印图片，一行文本有可能中间被分割跨两个页面，这时需要用css设置div内外边距来解决。如果内容不确定，这个问题很难解决。纯print-js打印html，又有很多css样式错乱或不支持，只能调整css样式解决兼容（工作量大）。

1.安装两个插件：

npm install print-js --save
npm install --save html2canvas 

【html2canvas】用法：（注）给dom设置width宽度（或添加类名控制打印时的样式），再执行画布函数。浏览器保存PDF文档可视内容也是710像素左右。

//html2canvas配置文档：https://allenchinese.github.io/html2canvas-docs-zh-cn/docs/html2canvas-configuration.html
document.body.style.width = '710px';
html2canvas(document.body, {
  backgroundColor: '#ffffff',
}).then((canvas) => {
  // toDataURL 图片格式转成 base64
  let dataURL = canvas.toDataURL('image/png');
});

【print-js】用法：

//官网https://printjs.crabbly.com/
printJs({
  printable: base64_dataURL,// pdf or image url, html element id or json data object
  //printable:['https://www.baidu.com/img/flexible/logo/pc/result.png','https://www.baidu.com/img/flexible/logo/pc/result.png'],//支持多张图片
  type: "image",
  maxWidth: 1000,
  base64: true,
  style: `@media print { @page {size: auto;} body{margin:0px 5px}}` // 解决出现多页打印时第一页空白问题
});

【element-ui + vue2】项目的实现打印的代码：

<template>
  <div class="container">
    <div @click="handlePrint">打印按钮</div>
    <div></div>
    <div id="BaseTableBox">要打印的内容</div>
    <div></div>
  </div>
</template>
<script>
import printJs from "print-js"; //导入
import html2canvas from "html2canvas"; //导入
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    //打印
    handlePrint() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: "正在启动打印",
      //   spinner: "el-icon-loading",
      //   background: "rgba(255, 255, 255, 1)",
      // });

      // let dom = this.$el.querySelector("#BaseTableBox");
      let dom = document.querySelector("#BaseTableBox");
      dom.classList.add("BaseTablePrint"); //添加打印的布局样式
      let timer = setTimeout(() => {
        //添加class样式不能马上生效，所以用定时器延迟，保证样式生效后再用画布绘制。
        html2canvas(dom, {
          backgroundColor: "#ffffff",
        }).then((canvas) => {
          // loading.close();//关闭element-ui的加载遮罩
          // toDataURL 图片格式转成 base64
          let dataURL = canvas.toDataURL("image/png");
          //打印
          printJs({
            printable: dataURL,
            type: "image",
            maxWidth: 1000,
            base64: true,
            style: `@media print { @page {size: auto;} body{margin:0px 5px}}` // 解决出现多页打印时第一页空白问题
          });
          dom.classList.remove("BaseTablePrint"); //删除打印的布局样式
          clearTimeout(timer);
        });
      }, 300);
    },
  },
};
</script>

<style lang="scss">
.BaseTablePrint {
  //打印的样式
  width:710px;
}
</style>

注意：【@media print】媒体查询的样式，在edge浏览器中，只有用浏览器快捷式【Ctrl + P】启动打印print css样式才会生效。