js 基于vue实现页面内容跳转新窗口打印

基于vue实现页面内容跳转新窗口打印：
html：

<button @click="printMaterial">打印</button>
<div id="printMaterialBox">
  <div class="print-page-box">
    <div class="print-page"
         style="background:#fff;margin:0 auto 20px;width: 21cm;height: 29.7cm;overflow:hidden;"
         :key="index"
         v-for="(data,index) in showData">
      <div :id="'page'+index"
           style="page-break-after:always;overflow: hidden;">
        <div class="section"
             style="width:100%;">
          <div class="picList">
            <div class="box"
                 v-for="(item,index) in data.dataArr"
                 :key="index">
              <div class="top">
                <div class="left">
                  <img src=""
                       alt="">
                </div>
                <div class="right">
                  <div class="sontop">1</div>
                  <div class="sonbottom">
                    <div class="sonleft">2</div>
                    <div class="sonright">3</div>
                    <div class="clearfloat"></div>
                  </div>
                </div>
                <div class="clearfloat"></div>
              </div>
              <div class="bottom">
                <div class="left">4</div>
                <div class="right">
                  <div class="son">
                    <div class="sontop">5</div>
                    <div class="sonbottom">6</div>
                  </div>
                </div>
                <div class="clearfloat"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

getData () {
  let arr = [];
  for (let i = 0; i < 134; i++) {
    let str = {};
    str.num = i;
    arr.push(str);
  }
  let arrNum = arr.length;
  let pageNum = Math.ceil(arrNum / 21); //每页21条数据。修改条数，样式也需要对应修改
  let newArr = [];
  for (let k = 0; k < pageNum; k++) {
    let dataArr = [];
    let itemstr = {};
    for (let n = k * 21; n < arr.length; n++) {
      let list = arr[n];
      if (n < (k + 1) * 21) {
        dataArr.push(list);
      }
    }

    itemstr.dataArr = dataArr;
    newArr.push(itemstr);
  }
  this.showData = newArr;
},
printMaterial () {
  var printpage = "printMaterialBox";
  setTimeout(function () {
    var css = '@charset "utf-8";*{box-sizing:border-box;margin:0;padding:0}html{width:100%;height:100%;font-size:16px}body{width:100%;height:100%}a{text-decoration:none}.clearfloat{clear:both}input,textarea{outline:0;font-family:Helvetica,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}input:focus{outline:0;font-family:Helvetica,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}.section{box-sizing:border-box;margin:10px auto 0;width:95%;height:auto}.picList{width:100%}.box{width:236px;height:132.5px;text-align:center;border:1px solid #333;border-radius:3px;float:left;margin:0 20px 20px 0}.box:nth-child(3n) {margin:0 0 20px 0;}.top{width:100%;height:78px}.top .left{width:78px;height:78px;float:left;border-right:1px solid #333;border-bottom:1px solid #333}.top .left img{width:100%;height:100%;display:block}.top .right{width:calc(100% - 78px);height:78px;float:right}.top .right .sontop{width:100%;height:52px;word-wrap:break-word;word-break:normal;border-bottom:1px solid #333}.top .right .sonbottom{width:100%;height:26px}.top .right .sonbottom .sonleft{width:78px;height:26px;float:left;word-wrap:break-word;word-break:normal;border-right:1px solid #333;border-bottom:1px solid #333}.top .right .sonbottom .sonright{width:78px;height:26px;float:right;word-wrap:break-word;word-break:normal;background:#ff0;border-bottom:1px solid #333}.bottom{width:100%;height:52px}.bottom .left{width:156px;height:100%;float:left;word-wrap:break-word;word-break:normal;border-right:1px solid #333}.bottom .right{width:78px;height:100%;float:right}.bottom .right .son{width:100%;height:52px}.bottom .right .son .sontop{width:100%;height:26px;word-wrap:break-word;word-break:normal;border-bottom:1px solid #333}.bottom .right .son .sonbottom{width:100%;height:26px;word-wrap:break-word;word-break:normal;background:#ff0}';
    var headstr = "<html><head><title></title></head><style>" + css + "</style><body>";
    var footstr = "</body></html>";
    var newstr = document.all.item(printpage).innerHTML;
    var oldstr = document.body.innerHTML;
    var myWindow = window.open('', 'newwindow', 'fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no');
    myWindow.document.body.innerHTML = headstr + newstr + footstr;
    myWindow.print();
    setTimeout(function () {
      myWindow.close();
    }, 300);
    return false;
  }, 1000);
},