vue实现页面打印

安装

// 安装 打印组件
npm install vue-print-nb --save

引用

vue2引用

import Print from 'vue-print-nb'
// 全局引用
Vue.use(Print);

// 或者

// 单组件引用
import print from 'vue-print-nb'
// 在自定义指令中注册
directives: {
    print   
}

vue3引用

// 全局引用
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

// 或者

// 单组件引用
import print from 'vue3-print-nb'
// 在自定义指令中注册
directives: {
    print   
}

API

打印内容示范 

<template>
  <div class="layout-router-container">
    <el-card class="goosn-card-gray modular-bottom-margin">
      <body-header :title="title">
        <div slot="right">
          <el-button class="search-button" @click="cancel">取消</el-button>
          <el-button type="primary" v-print="printObj">打印</el-button>
        </div>
      </body-header>
    </el-card>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    <div id="printMe">
      <div v-for="(item, index) in dataList" :key="index">
        <div class="boxli-card">
          <div class="boxli-card-top boxFlexSpace">
            <div v-if="item.signer_info">
              签订人：{{ item.signer_info.name }}
            </div>
            <div>订单编号：{{ item.order_sn }}</div>
          </div>
          <div class="boxli-card-top">
            <img class="qrcode" :src="item.qr_code" alt="" />
            <div class="card-top-text">
              <!-- {{ item.order_name }} -->
              GOOSN-生产单
            </div>
          </div>
          <div class="informationorder">
            <div>订单名称：{{ item.order_name }}</div>
            <div>客户名称：{{ item.customer_name }}</div>
            <div>订单sku数量：{{ item.sku_total_num }}</div>
            <div>定制工艺：{{ item.tech }}</div>
            <div>订单工作流：{{ item.flow_name }}</div>
            <div>物流公司：{{ item.express_name }}</div>
            <div>最晚发货时间：{{ item.dead_line }}</div>
            <div>订单负责人：{{ item.main_staffs | Head }}</div>
          </div>
          <div class="remark">备注:{{ item.remarks }}</div>
          <div class="producteffect">
            <el-image class="imagebox" :src="item.imgs[0]">
              <div slot="error" class="image-slot">
                <!-- <i class="el-icon-picture-outline"></i> -->
              </div></el-image
            >
          </div>
          <div class="boxli-card-bottom">
            <div>制单人：{{ userInfo ? userInfo.name : "" }}</div>
            <div>打印时间：{{ time }}</div>
          </div>
        </div>
        <div style="page-break-after: always"></div>
      </div>
    </div>
  </div>
</template>

data() {
    return {
      ims: require("../../../assets/dkw.png"),
      printObj: {
        id: "printMe", //要打印的id名 无#号
        popTitle: " ", //页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: "",
        previewBeforeOpenCallback: () => {
          console.log("触发打印预览打开前回调");
        },
        previewOpenCallback: () => {
          console.log("触发打开打印预览回调");
        },
        beforeOpenCallback: () => {
          console.log("触发打印工具打开前回调");
        },
        openCallback: () => {
          console.log("触发打开打印工具回调");
        },
        closeCallback: () => {
          console.log("触发关闭打印工具回调，");
          const { mes_ids } = this.$route.query;
          if (mes_ids) {
            this.printInfo(mes_ids);
          }
          this.time = getNowDate();
        },
        clickMounted: () => {
          console.log("触发点击打印回调");
        },
      },
      dataList: [],
      time: "",
    };
  },

分页打印

<template>
	<div>
		<button v-print="'#nbprint'">NB打印</button>
		<div id="nbprint">
             // 方法一
             // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页
			<div style="page-break-after:always">这是第二页</div>
			<div style="page-break-after:always">这是第二页</div>
		</div>
	</div>
</template>

<style>
     // 方法二
     // 使用媒体查询 在打印时设置 body 和 html 的高度为auto
     @media print {
        @page {
          size:  auto;
        }
        body, html {
          height: auto !important;
        }
      }
</style>

补充vue-print-nb插件的一些优化

1.去掉页眉页脚

<style>
@page {
    size: auto;
    margin: 0mm;
  }
</style>

2.打印內容不自动换行问题

给不换行的标签加上 word-wrap:break-word就可以了

<style>
  .procedure{
      word-wrap:break-word;
   }
</style>