vue3 打印-526互联

下载依赖

npm install vue3-print-nb --save

main.js引入

import print from 'vue3-print-nb'

挂载

app.use(print);

自己写的额弹框表格

<el-dialog title="打印当前页面" v-model="dialogTableVisibleprint" width="80%">
    <div id="printTest">
      <div class="order">
        <h3 class="title_order">审计作业</h3>
        <br />
        <div class="border_"></div>
        <div class="border_k">
          <ul style="padding-left: 0" class="uls">
            <li class="cent">
              <div></div>
              <div>项目名称</div>
              <div>审类别</div>
              <div>人员</div>
              <div>单位名称</div>
              <div>统一社会信用代码</div>
              <div>状态</div>
              <div>收费</div>
              <div>开始时间</div>
              <div>结束时间</div>
            </li>
            <li class="centers" v-for="(i, index) in tableData" :key="index">
              <div></div>
              <div>{{ i.title }}</div>
              <div>{{ i.AuditingCategories }}</div>
              <div>{{ i.personnel }}</div>
              <div>{{ i.UnitName }}</div>
              <div>{{ i.CreditCode }}</div>
              <div>{{ i.state }}</div>
              <div>{{ i.charge }}</div>
              <div>{{ i.start }}</div>
              <div>{{ i.end }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div></div>
    <div class="prontclass">
      <el-button class="prontbtn" @click="show = false" v-print="'#printTest'">打印表格</el-button>
    </div>
  </el-dialog>

View Code

打印表格的样式

// 打印样式
#printTest {
  text-align: center;
}
.order {
  width: 1076px;
  /* height: 500px; */
  /* background: #d9001b; */
  // padding: 20px 35px;
  margin: 0 auto;
}
.border_ {
  height: 2px;
  width: 100%;
  background: #000;
}
.border_k {
  width: 100%;
  /* height: 20px; */
  border: 1px solid #666;
  margin-top: 20px;
  min-height: 250px;
  border-bottom: none;
}
.cent,
.centers {
  display: flex;
}

.cent {
  border-bottom: 1px solid #333;
}
.fenlai > p {
  flex: 1 1 auto;
  text-align: left;
}
.cent > div {
  padding-top: 20px;
  padding-bottom: 20px;
}
.centers {
  /* height: 300px;  */
  /* margin: 10px 0; */
}
.title_order {
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #007768;
}
.fenlai > p {
  font-size: 16px;
  color: #333;
  margin-bottom: 0;
}
.fenlai > p > span {
  font-size: 14px;
  color: #666;
}
.uls {
  margin-bottom: 0;
}
.cent div:nth-child(1) {
  width: 0;
}
.centers div:nth-child(1) {
  width: 0;
}
.cent div:nth-child(2) {
  width: 160px;
  border-right: 1px solid #333;
}
.centers div:nth-child(2) {
  width: 160px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(3) {
  width: 100px;
  border-right: 1px solid #333;
}
.centers div:nth-child(3) {
  width: 100px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(4) {
  width: 100px;
  border-right: 1px solid #333;
}
.centers div:nth-child(4) {
  width: 100px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(5) {
  width: 160px;
  border-right: 1px solid #333;
}
.centers div:nth-child(5) {
  width: 160px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(6) {
  width: 160px;
  border-right: 1px solid #333;
}
.centers div:nth-child(6) {
  width: 160px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(7) {
  width: 100px;
  border-right: 1px solid #333;
}
.centers div:nth-child(7) {
  width: 100px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(8) {
  width: 100px;
  border-right: 1px solid #333;
}
.centers div:nth-child(8) {
  width: 100px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(9) {
  width: 100px;
  border-right: 1px solid #333;
}
.centers div:nth-child(9) {
  width: 100px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cent div:nth-child(10) {
  width: 100px;
  border-right: 1px solid #333;
}
.centers div:nth-child(10) {
  width: 100px;
  padding: 15px 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.centers div {
  text-align: center;
}
.prontclass {
  width: 100%;
  text-align: right;
  .prontbtn {
    background: #007768;
    color: #fff;
  }
}

View Code

打开弹框

  <el-button size="small" class="btncalss" @click="dialogTableVisibleprint = true">打印</el-button>

v-print="'#printTest'"
v-print这个是打印事件
"'#printTest'"这个是打印的div的id

provide inject vue3 vue