JS的 window.print

最新推荐文章于 2023-07-20 09:10:00 发布
很远有多远
最新推荐文章于 2023-07-20 09:10:00 发布
阅读量296
点赞数
文章标签： javascript vue.js elementui
本文链接：https://blog.csdn.net/weixin_52509007/article/details/124987979
版权
<template>
  <div class="table">
    <div v-if="!isPrint" class="header-wr">
      <v-btn color="primary" @click="printFn">打印</v-btn>
    </div>
    <div id="tabs-2">
      <div class="report-content-wr">
        <table class="table-wr" border=" " cellspacing=" " cellpadding=" ">
          <thead>
            <tr>
              <th colspan="10">
                <span>
                  <img width="50px" src="@/assets/img/logo1.png" alt=" " />
                </span>
                <strong>  </strong>
              </th>
            </tr>
          </thead>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1"
              ><div> <span class="tit"></span> </div></td
            >
            <td></td>
            <td colspan="1"
              ><div> <span class="tit"></span> </div></td
            >
            <td></td>
            <td rowspan="4">
              <div style="overflow: hidden; width: 100%; height: 100%; padding: 0">
                <span v-if="!patPhotoComputed" class="text" style="line-height: 26px">贴照片</span>
                <img width="100%" height="100%" class="img" :src="patPhotoComputed" alt="" />
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"> </span></div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit">族</span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span></div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td colspan="2"
              >。</td
            >
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td></td>
            <td colspan="1">
              <div> <span class="tit"> </span> </div>
            </td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="1">
              <div> <span class="tit"></span> </div>
            </td>
            <td colspan="6"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      patPhotoComputed: 'http://pmp.tronsystem.com:11010/user/avatar/Rick/-1',
      isPrint: false
    }
  },
  methods: {
    //  打印表格
    printFn() {
      this.isPrint = true
      this.$nextTick(() => {
        let width = document.querySelector('.table .report-content-wr')
        console.dir(width.clientWidth)
        document.querySelector('body').style.width = width.clientWidth + 'px'
        document.querySelector('#app').style.width = width.clientWidth + 'px'
        window.print()

        setTimeout(() => {
          this.isPrint = false
          document.querySelector('body').style.width = '100%'
          document.querySelector('#app').style.width = '100%'
        }, 600)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table {
  width: 100%;
  #tabs-2 {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .table-wr {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #ccc;
      th,
      table {
        border: 1px solid #ccc;
      }
      > tr {
        > td {
          width: 120px;
          border: 1px solid #ccc;
          flex-wrap: wrap;
          > div {
            padding: 8px 4px;

            .tit {
              font-size: 14px;
            }
            .val {
              padding-left: 4px;
              font-size: 14px;
            }

            .text {
              font-size: 14px;
            }
          }
        }
      }
    }
    .person_content {
      table {
        border-collapse: collapse;
      }

      td {
        text-align: left;
      }
      tr {
        height: 40px;
      }
    }
  }
}
</style>