Vue 3 调起打印窗口

Fri_

已于 2024-08-08 16:59:54 修改

阅读量168

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-07-19 16:03:32 首次发布

本文链接：https://blog.csdn.net/weixin_51878863/article/details/140552492

版权

<template>
  <el-button @click="print()">点击打印</el-button>

  <div id="printBox">
    // 需要打印的内容
  </div>
</template>

<style scoped lang="scss">
#printBox {
  // 将元素定位在浏览器的固定位置，并将其移动到非常靠上的位置（-99999px），使其在页面上不可见
  position: fixed;
  top: -99999px;
  left: 0;
  visibility: hidden;
  height: auto;
  overflow-y: scroll;
  background-color: #fff;
}
</style>

打印方法

const print = () => {
  setTimeout(() => {
    var printBox = document.getElementById("printBox"); //获取需要打印的内容
    var newContent = printBox.innerHTML;
    var iframe = document.createElement("IFRAME");
    iframe.innerText =
      "position:absolute;width:0px;height:0px;left:-500px;top:-500px;";
    document.body.appendChild(iframe);
    var doc = iframe.contentWindow.document;
    var style = document.createElement("style");
    style.type = "text/css";
    style.innerText = "table {border-collapse: collapse;border-spacing: 0;}";
    style.innerText +=
      ".hospitalTitle{font-size: 20px;font-weight: 600;text-align: center;margin: 20px 0;}";
    style.innerText +=
      "th {border: 1px solid #ccc;width: 220px;padding: 20px 20px;text-align: center;background: #9bc2e6;}";
    style.innerText +=
      "td {border: 1px solid #ccc;width: 220px;padding: 10px 10px;text-align: center;}";
    doc.head.appendChild(style);
    doc.body.innerHTML = newContent;
    var frameWindow = iframe.contentWindow;
    frameWindow.close();
    frameWindow.focus();
    frameWindow.print();
  }, 200);
};