<template>
  <div>
    <div @click="print">打印</div>
    <!-- <div
      id="delivery"
      style="
        margin-top: 20px;
        font-size: 200px !important;
        font-weight: 600;
        color: red;
      "
    >
      测试打印
    </div> -->
    <!--打印内容开始-->
    <h1 id="studentPhoTable" style="
        margin-top: 20px;
        font-size: 300px !important;
        font-weight: 600;
        color: red;
      ">测试打印</h1>
    <!--打印内容结束-->
  </div>
</template>

<script>
import Print from "print-js";
export default {
  methods: {
    /*  likes(){
      console.log(223);
      Print({
        printable: 'delivery',
        type: 'html',
        targetStyles: ['*'],
        //style: 'body, html {font-size:300px !important;color:red;}', // 确保打印时应用这个样式
        ignoreElements: ['no-logs', 'goods-image', 'no-btn','elementToIgnore']
      })
    } */
    print() {
      var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
      if (userAgent.indexOf("trident") > -1) {
        alert("请使用google或者360浏览器打印");
        return false;
      } else if (userAgent.indexOf("msie") > -1) {
        var onlyChoseAlert = simpleAlert({
          content: "请使用Google或者360浏览器打印",
          buttons: {
            确定: function () {
              onlyChoseAlert.close();
            },
          },
        });
        alert("请使用google或者360浏览器打印");
        return false;
      } else {
        //其它浏览器使用lodop
        var oldstr = document.body.innerHTML;
        var headstr = "<html><head><title></title></head><body>";
        var footstr = "</body></html>";
        //执行隐藏打印区域不需要打印的内容
       // document.getElementById("otherpho").style.display = "none";
        var printData = document.getElementById("studentPhoTable").innerHTML; //获得 div 里的所有 html 数据
        var wind = window.open(
          "",
          "newwin",
          "toolbar=no,scrollbars=yes,menubar=no"
        );
        wind.document.body.innerHTML = headstr + printData + footstr;
        wind.print();
        //打印结束后，放开隐藏内容
        document.getElementById("otherpho").style.display = "block";
        wind.close();
        window.document.body.innerHTML = oldstr;
      }
    },
  },
};
</script>

<style>
</style>
