window.print

最新推荐文章于 2024-05-08 14:12:05 发布

ZOEylchen

最新推荐文章于 2024-05-08 14:12:05 发布

阅读量814

点赞数

分类专栏： vue 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/ZOEylchen/article/details/125079232

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

遇到页面中有导航时候

在mounted中隐藏

mounted () {
    document.querySelector('.leftNav-module').style.display = 'none'
    window.onbeforeprint = function (event) {
      // 将一些不需要打印的元素隐藏
      document.querySelector('.topBar').style.display = 'none'
    }
    window.onafterprint = function (event) {
      // 放开隐藏的元素
      document.querySelector('.topBar').style.display = 'block'
    }
  }

在行内元素上写高度宽度

<div class="repair-solution" id="wrap-content" style="width: 800px;margin: 40px auto;">
    <el-button type="primary" @click="printOrder('wrap-content')" class="print_btn">打印工单</el-button>
    <div class="to-print-content">
      <p class="title">中山一院设备维修方案</p>
      <div style="display: flex;justify-content: center">

打印时候，不能直接写window.print(), 需要用到下面的，这个printpage就是页面的id

 printOrder (printpage) {
      var headhtml = '<html><head><title></title></head><body>'
      var foothtml = '</body>'
      // 获取div中的html内容
      var newhtml = document.all.item(printpage).innerHTML
      // 获取div中的html内容，jquery写法如下
      // var newhtml= $("#" + printpage).html();

      // 获取原来的窗口界面body的html内容，并保存起来
      var oldhtml = document.body.innerHTML

      // 给窗口界面重新赋值，赋自己拼接起来的html内容
      document.body.innerHTML = headhtml + newhtml + foothtml
      // 调用window.print方法打印新窗口
      window.print()

      // 将原来窗口body的html值回填展示
      document.body.innerHTML = oldhtml
      return false
    }

@media print{
  body{
    background-color: white;
    width: 1000px;
  }
  .print   {display:block;}
  .print_btn {display:none;}
  td{
    border: 1px solid;
    width: 100px;
    height: 35px;
  }
}