打印前端当前页面—window.print()

最新推荐文章于 2024-06-10 16:43:59 发布

畅畅orchid

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量416

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52094928/article/details/118484417

版权

打印前端当前页面—window.print()

1、首先template标签中，设置一个包含所有数据的div，并设置id属性，例如listPrint

<template>
  <div>
    <!-- 打印选题列表 -->
    <div class="content">
      <span class="printBtn" @click="printTemplateEvent">打印</span>
      <div id="listDetail">
        <div class="printTable">
          <div class="listTable">
            <h3 class="title">中医古籍出版社审稿单</h3>
            <table class="detailTable" cellpadding="0" cellspacing="0">
              <tr>
                <td>书名与责任者信息</td>
                <td>1111111</td>
              </tr>
              <tr>
                <td>上一版次书号</td>
                <td>{{imgForm.subjectNum}}</td>
              </tr>
              <tr>
                <td>书名（正书名）</td>
                <td>{{imgForm.bookName}}</td>
              </tr>
              <tr>
                <td>并列书名</td>
                <td>{{imgForm.subBookName}}</td>
              </tr>
              <tr>
                <td>副书名及说明文字</td>
                <td>{{imgForm.subBookCaptions}}</td>
              </tr>
            </table>
            <p>（此表请正反面打印）</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

2、在script标签里面设置打印方法：

<script>
  import "@/styles/commonRe.css";
  import { getThreeDetailAPI, getAuditListAPI } from '@/api/newBook/examine';
  import Cookies from "js-cookie";
    export default {
      data() {
          return {
            id:this.$route.query.id,
            imgForm: {},
            auditList:[],
            audit:['初审人员','复审人员','终审人员'],
            option:['初审意见','复审意见','终审意见'],
            bookTypeNum:this.$route.query.bookTypeNum,
          }
      },
      created() {
        if(this.bookTypeNum == 1){
          this.$route.meta.title = '打印审稿单';
        }else{
          this.$route.meta.title = '打印再版图书审稿单'
        }
        
        this.getDetail();
        this.getAuditList()
      },
      methods: {
      
        printTemplateEvent(){
          document.body.innerHTML=document.getElementById('listDetail').innerHTML;
          window.print();
        },
        
        getDetail(){
          let id = {
            id:this.id
          }
          getThreeDetailAPI(id).then(res=>{
            if(res.data.code == 0){
              this.imgForm = res.data.data;
            }
          })
        },
        
        //查审核意见
        getAuditList(){
          getAuditListAPI(this.id).then(res=>{
            this.auditList = res.data.data;
          })
        },
      }
    }
</script>

3、在style设置当前打印页的样式：

<style lang="less" scoped>
  .content{
    width: 96%;
    height: auto;
    margin: 20px auto;
    padding: 30px 100px;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
  }
  .printTable{
    width: 100%;
    height: auto;
    background-color: #fff;
    .listTable{
      width: 100%;
      height: auto;
      .redStyle{
        color: red;
      }
      .blueStyle{
        color: #4472C4;
      }
      .title{
        width: 100%;
        text-align: center;
        line-height: 60px;
      }
      .tableTitle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 30px;
      }
      .detailTable{
        border: 1px solid #ccc;
        width: 100%;
        td{
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          text-align: center;
          height: 50px;
          padding: 10px;
          &:first-child{
            width: 120px;
          }
        }
      }
    }
  }
</style>