VUE使用vue-print-nb实现打印功能，解决图片问题，样式问题

vue做了一个打印功能，也遇到过一些问题，记录一下,有些问题欢迎大家批评指正。
从网上找了一些打印方式最终决定用这种方式：
安装

npm install vue-print-nb --save

然后在main.js中引入

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

在vue文件中的使用

<div id="printMe'">打印的内容</div>
<el-button v-print="'#printMe'">打印</el-button>

这样就能打印了，有预览，但火狐52版本不行，谷歌可以。
当然，正常项目实践中不会想象的那么简单。。。。。。

这是模糊之后的模板图，e…mm
根据要求，我在项目中点击我绘制的按钮，弹窗显示要打印的内容，因为使用火狐52版本浏览器，没有预览，自己就绘制了预览弹窗，然后点击打印，执行打印操作。

弹窗里加div,代码：

<el-dialog ref="" :visible.sync="" :show-close="" :modal-append-to-body=true :append-to-body=true top="0" :class="">
  <div slot="title" class="dialog-header">
    预览
  </div>
  <div class="dialog-body" style="padding-left: 30px;padding-right: 30px">
    <div id="print" style="padding-top: 50px;padding-left: 0px;padding-right: 0px">
    </div>
    <el-button tabindex="" ref="" class="" v-print="'#print'" @click="print">
      <i class=""></i> 打印
    </el-button>
  </div>
</el-dialog>

要展示的内容也是自己要打印的内容，在点击预览时，放到$(’#print’)的div里。
于是我走后台方法把要展示的内容给补上，因为列表的打印牵扯的问题是不知道几条数据，所以直接在js拼代码，大体代码如下：

预览点击的方法() {
//置空内容
  $('#print').html("");
  const self = this;
  const val = self.tableDataChecked;
  // 如果选中数据存在
  if (val.length > 0) {
    let ids = [];
    //获取选中数据的id集
    val.forEach((item) => {
      ids.push(item.invoiceId);
    });
    var tableId = {
      ids: ids.join(',')
    };
    //展示预览弹窗前先去查数据返回来
    jsName['getPrintData'](tableId).then(res => {
     if(res.code=="0"){
       $('#print').html("");
       var data = res.data;
       var str="";
       //循环查询的数据，需要勾画出页面样式
       for(var j=0;j<data.length;j++){
       //<div style='page-break-after:always'> 分页的div
           str+="<div style='page-break-after:always'><table id='table1' cellpadding='0' cellspacing='0' border='1' style='border-color: #0A1532'><thead><tr style='height:30px'><td colspan='2' style='border-right: 0;font-size:10px;'></td><td colspan='6' style='border-right: 0;border-left: 0;font-size:16px;text-align: right;padding-right: 288px'></td><td colspan='2' style='border-right: 0;border-left: 0;'><span style='font-size:10px;padding-left: 20px'></span><span style='font-size:10px'>"+data[j].no+"</span></td></tr><tr style='height:30px'><td colspan='1' style='width:50px;text-align:center;font-size:10px;'>序号</td><td colspan='1' style='width:160px;text-align:center;font-size:10px;'>字段1</td><td colspan='1' style='width:110px;text-align:center;font-size:10px;'>字段2</td><td colspan='1' style='width:110px;text-align:center;font-size:10px;'>字段3</td><td colspan='1' style='width:290px;text-align:center;font-size:10px;'>字段4</td><td colspan='1' style='width:100px;text-align:center;font-size:10px;'>字段5</td><td colspan='1' style='width:68px;text-align:center;font-size:10px;'>字段6</td><td colspan='1' style='width:50px;text-align:center;font-size:10px;'>字段7</td><td colspan='1' style='width:100px;text-align:center;font-size:10px;'>字段8</td><td colspan='1' style='width:100px;text-align:center;font-size:10px;'>字段9</td></tr></thead><tbody>";
           var tableData = data[j].tableData;
           for(var i=0;i<tableData.length;i++){
             str += "<tr style='height:30px'><td  style='text-align:center;font-size:10px;'>" + tableData[i].index + "</td><td style='text-align:center;font-size:10px;'>" + tableData[i].字段1+"</td><td style='text-align:center;font-size:10px;'>" + tableData[i].字段2+"</td><td style='text-align:left;font-size:10px;'><span style='margin-left:3px'>" + tableData[i].字段3+"</span></td><td style='text-align:left;font-size:10px;'>" + tableData[i].字段4+"</td><td style='text-align:center;font-size:10px;'>" + tableData[i].字段5+"</td><td style='text-align:center;font-size:10px;'>" + tableData[i].字段6+ "</td><td style='text-align:center;font-size:10px;'>" + tableData[i].字段7+ "</td><td style='text-align:center;font-size:10px;'>" + tableData[i].字段8+"</td><td style='text-align:center;font-size:10px;'>" + tableData[i].字段9+ "</td></trheight:30px>";
           }
           str+="</tbody></table>";
           str+="<table cellpadding='0' cellspacing='0' border='1' style='border-color: #0A1532;border-top: 0'><thead><tr style='height:30px;'><td colspan='9' style='text-align:center;font-size:10px;border-top: 0'>供需方基本信息</td></tr></thead><tbody>";
           str+="<tr style='height:30px'><td style='text-align:center;font-size:10px;width:140px;'>生产单位</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].supplierName+"</td><td style='text-align:center;font-size:10px;width:140px;'>需方单位</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].department+"</td><td style='text-align:center;font-size:10px;width:140px;'>发货人</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].consignor+"</td></tr>";
           str+="<tr style='height:30px'><td style='text-align:center;font-size:10px;width:140px;'>生产方联系电话</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].supplierPhone+"</td><td style='text-align:center;font-size:10px;width:140px;'>需方联系电话</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].purchaserPhone+"</td><td style='text-align:center;font-size:10px;width:140px;'>发货人联系电话</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].consignorPhone+"</td></tr>";
           str+="<tr style='height:30px'><td style='text-align:center;font-size:10px;width:140px;'>生产方联系人</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].supplierContact+"</td><td style='text-align:center;font-size:10px;width:140px;'>需方联系人</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].purchaser+"</td><td style='text-align:center;font-size:10px;width:140px;'>发货地址</td><td style='text-align:center;font-size:10px;width:225px;'>"+data[j].CompanyAddress+"</td></tr>";
           //下面是二维码图片
           str+="</tbody></table><div style='height:10px'></div><div id='id"+j+"' style='text-align: center' ref='img'></div></div>"; 
       }
       $('#print').append(str);
       //二维码加载(调用的方法在下方可以借鉴)
       self.qrOnload(data,0)
     }else{
           self.$message.error('表格数据请求异常');
     }
    });
    //弹窗展示
  self.Show = !self.Show;
  }else{
    self.$message.warning('请至少选择一条数据');
  }
},

其中<div style='page-break-after:always'>这个是分页，也算一个小难点。
另外我二维码图片的地方给赋了id，并没有去赋图片路径，因为遇到了个问题，图片去打印时打印不出来，怎么解决呢，我就把图片转成base64格式，代码：

qrOnload: function (data, num) {
//二维码
  const self = this;
  // var base64="";
  let img = data[num].src;
  var image = new Image();
  image.src = img;
  image.onload = function () {
    var base64 = self.getBase64Image(image);
    $('#id'+num).html("<img   ref='img' src="+base64+">");
  }
  self.qrOnload(data, num + 1);
},
getBase64Image(img) {
//转base64
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  var dataURL = canvas.toDataURL("image/"+ext,0.4);
  return dataURL;
},

这样就可以了。
但是样式有些问题，例如：页眉页脚会默认带着，还有两边的边距等问题，解决办法，代码如下：
我给弹窗里的打印按钮添加点击事件，上面弹窗的代码里有：

print(){
    var style = document.createElement('style');
    style.innerHTML = "@page{size: landscape;margin: 5mm;}" +
            " html{background-color: #FFFFFF; margin: 0;}" +
            " body{border: solid 0px #FFFFFF;}";
    window.document.head.appendChild(style);
},

这样两边边距过大，存在页眉页脚的问题就解决了。但是我又遇到一个问题，至今还没有解决，因为我提到过多次的火狐52版本，在最新的火狐，谷歌都没有问题，火狐52版本里，我弹窗里的打印按钮得点击多次才会出现下面的弹窗，我想点一下就出来，或者不出来，直接出来打印的弹窗

这个弹窗点取消或者关闭，才会出来打印

如果有大佬能看到我的问题，劳请帮助下，万分感激。
@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐