<div id='app'>
  <div class="header not_print">
    <input type="button" value="直式列印" @click="changePrintOrietation('portrait')">
    <input type="button" value="橫式列印" @click="changePrintOrietation('landscape')">
    <br>
    <p>now-print-orientation: {{ orientation }}</p>
  </div>
  <div class="body">
    <template v-for="(item) in 60">
      {{ fakeletters }}
    </template>
  </div>
  <div class="wrap_printbutton not_print">
    <div class="printbutton">
      <a href="javascript:void(0)" @click="makePrint();">
        <b-icon icon="printer-fill" style="color: #ffffff;"></b-icon>
        列印
      </a>
    </div>
  </div>
</div>

#app {
  padding: 15px;
}
.header {
  margin-bottom: 10px;
}
.body {
  width: 800px;
  color: #b0bec5;
}
.wrap_printbutton {
  line-height: 80px;
  text-align: left;
  padding-top: 20px;
}
input {
  padding: 8px 15px;
  margin-right: 16px;
}
p {
  display: inline-block;
  padding: 5px 8px;
  background: #90caf9;
}
.printbutton {
  a {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 22px;
    width: 180px;
    line-height: 50px;
    background-color: #0d6efd;
    border: none;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    &:active {
      background: #055de0;
    }
    &:hover {
      box-shadow: 0px 0px 5px 3px #1371ff81;
      text-decoration: none;
    }
  }
}
@media print {
  .not_print {
    display: none;
  }
}

const app = new Vue({
  el: "#app",
  name: "PrintButton",
  data() {
    return {
      fakeletters: "some letters here.",
      orientation: "default-portrait"
    };
  },
  created() {},
  methods: {
    makePrint() {
      window.print();
    },
    changePrintOrietation(orientation) {
      this.orientation = orientation;
      var css = `@page { size: A4 ${orientation}; margin: 0.5cm 0.5cm; }`;
      var havePrint = document.getElementById("print_style");
      if (havePrint) {
        havePrint.innerText = css;
        console.log("havePrint", havePrint);
      } else {
        var head = document.head || document.getElementsByTagName("head")[0];
        var style = document.createElement("style");
        style.setAttribute("id", "print_style");
        style.media = "print";

        if (style.styleSheet) {
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(document.createTextNode(css));
        }
        head.appendChild(style);
      }
    }
  }
});