vue-print-nb的使用

小方很无聊

已于 2024-06-07 15:47:08 修改

阅读量199

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-06 19:35:35 首次发布

本文链接：https://blog.csdn.net/m0_72270036/article/details/134253124

版权

vue3中使用的是vue3-print-nb，vue2是vue-print-nb

用法一样，安装不同的插件

vue3安装：npm i vue3-print-nb

vue2安装：npm i vue-print-nb

vue3的main.js中引入：

// 全局引用
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')

vue2中main.js引入:

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

使用，以vue3为例：

创建一个打印的子组件：

<template>
  <div id="nbprint">
    <table>
      <tr>
        <th colspan="8" style="text-align:center;">
          <div style="font-size:20px;">简历</div>
        </th>
      </tr>
      <tr>
        <th colspan="8">个人信息</th>
      </tr>
      <tr>
        <td>姓名:</td>
        <td>{{ printData.name }}</td>
        <td>身高:</td>
        <td>{{ printData.height }}</td>
        <td>年龄:</td>
        <td>{{ printData.age }}</td>
        <td colspan="2" rowspan="2">照片</td>
        <!-- <td></td> -->
      </tr>
      <tr>
        <td>性别:</td>
        <td>{{ printData.sex }}</td>
        <td>地址:</td>
        <td>{{ printData.address }}</td>
        <td>电话:</td>
        <td>{{ printData.phone }}</td>
        <!-- <td></td>
        <td></td> -->
      </tr>
      <tr>
        <td rowspan="2">其他信息:</td>
        <td>代表作:</td>
        <td colspan="6">{{ printData.magnum }}</td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
      </tr>
      <tr>
        <!-- <td ></td> -->
        <td>个人介绍:</td>
        <td colspan="6">{{ printData.introduce }}</td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
      </tr>
    </table>
  </div>
</template>

<script setup>

const props = defineProps({
  // 打印信息
  printData: {
    type: Object,
    default: {},
  },
});
console.log(props, 'returnInfo')


</script>

<style lang="scss" scoped>
//不可加margin，否则多个空白页
#nbprint {
  padding: 20px
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

tbody {
  width: 100%;
}

tr th {
  text-align: left;
}

th,
td {
  border: 1px solid black;
  padding: 2px;
  word-wrap: break-word;
  /* 当内容超出单元格宽度时自动换行 */
  max-width: 100%;
  /* 单元格的最大宽度为表格宽度 */
}
</style>

父组件中使用：

<template>
  <div>

    <el-button type="primary" v-print="printObj" @click="open = true" :icon="Printer" text>打印</el-button>
    <!-- 打印模板 -->
    <el-dialog v-model="open" title="客退单打印" fullscreen align-center>
      <printReturnModel id="nbprint" :printData="data">
      </printReturnModel>
    </el-dialog>
  </div>
</template>

<script setup>
import { Printer } from '@element-plus/icons-vue';
import printReturnModel from './component/printReturnModel.vue'
const data = ref({
  name: "阿坤",
  height: 180,
  age: 28,
  sex: "男",
  address: '北京',
  phone: 12345,
  magnum: '《鸡你太美》、《你干嘛哎呦！》、《蔡徐坤式篮球》',
  introduce: '全民制作人们，大家好，我是练习时长两年半的，个人练习生蔡徐坤，喜欢唱 跳 rap 篮球。'
})
const open = ref(false)
const printObj = {
  id: 'nbprint',
  closeCallback: () => {
    console.log("触发关闭打印工具回调");
    open.value = false
  },
}

</script>

<style  scoped></style>

v-print="对象"的形式，或者v-print="'#id名'",需要配置项以对象的形式使用。

常见的配置项如下：

let printObj = {
  id: 'nbprint', // 打印元素的id 不需要携带#号
  preview: true, // 开启打印预览
  previewTitle: '打印预览', // 打印预览标题
  popTitle: '员工信息', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
  // 头部文字 默认空 在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点
  extraHead: 'https://***/***.css, https://***/***.css',
  // 新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点
  extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  previewBeforeOpenCallback: () => {
    console.log("触发打印预览打开前回调");
  },
  previewOpenCallback: () => {
    console.log("触发打开打印预览回调");
  },
  beforeOpenCallback: () => {
    console.log("触发打印工具打开前回调");
  },
  openCallback: () => {
    console.log("触发打开打印工具回调");
  },
  closeCallback: () => {
    console.log("触发关闭打印工具回调");
  },
  clickMounted: () => {
    console.log("触发点击打印回调");
  }
}

注意:不要给打印的那个加margin，否则会多个空白页，可以加padding。

如果通过调接口的可以这么操作：

父组件：

<template>
  <div>

    <el-button type="primary"  @click="printBtn" :icon="Printer" text>打印</el-button>
    <!-- 打印模板 -->
   <el-dialog v-model="open" title="客退单打印" fullscreen align-center>
      <printReturnModel ref="printRef" @offPrint="open = false" :printData="data">
      </printReturnModel>
    </el-dialog>
  </div>
</template>

<script setup>
import { Printer } from '@element-plus/icons-vue';
import printReturnModel from './component/printReturnModel.vue'
const data=ref({})
const open = ref(false)
const printRef = ref(null)
const printBtn = async () => {
  data.value= await detailBatteryApi()
  open = true
  nextTick(() => {
    printRef.value.printClick.click()
  })
}
</script>

<style  scoped></style>

子组件：

<template>
 <div>
  <div id="nbprint">
    <table>
      <tr>
        <th colspan="8" style="text-align:center;">
          <div style="font-size:20px;">简历</div>
        </th>
      </tr>
      <tr>
        <th colspan="8">个人信息</th>
      </tr>
      <tr>
        <td>姓名:</td>
        <td>{{ printData.name }}</td>
        <td>身高:</td>
        <td>{{ printData.height }}</td>
        <td>年龄:</td>
        <td>{{ printData.age }}</td>
        <td colspan="2" rowspan="2">照片</td>
        <!-- <td></td> -->
      </tr>
      <tr>
        <td>性别:</td>
        <td>{{ printData.sex }}</td>
        <td>地址:</td>
        <td>{{ printData.address }}</td>
        <td>电话:</td>
        <td>{{ printData.phone }}</td>
        <!-- <td></td>
        <td></td> -->
      </tr>
      <tr>
        <td rowspan="2">其他信息:</td>
        <td>代表作:</td>
        <td colspan="6">{{ printData.magnum }}</td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
      </tr>
      <tr>
        <!-- <td ></td> -->
        <td>个人介绍:</td>
        <td colspan="6">{{ printData.introduce }}</td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
      </tr>
    </table>
  </div>
  <div ref="printClick" style="opacity: 0;height:0px;width:0px" v-print="printObj">打 印</div>
  </div>
</template>

<script setup>

const props = defineProps({
  // 打印信息
  printData: {
    type: Object,
    default: {},
  },
});
console.log(props, 'returnInfo')
const emit = defineEmits(['offPrint'])
const printClick = ref(null)
const printObj = {
  id: 'nbprint',
  closeCallback: () => {
    console.log("触发关闭打印工具回调");
    emit('offPrint')
  },
}

defineExpose({
  printClick
})

</script>

<style lang="scss" scoped>
//不可加margin，否则多个空白页
#nbprint {
  padding: 20px
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

tbody {
  width: 100%;
}

tr th {
  text-align: left;
}

th,
td {
  border: 1px solid black;
  padding: 2px;
  word-wrap: break-word;
  /* 当内容超出单元格宽度时自动换行 */
  max-width: 100%;
  /* 单元格的最大宽度为表格宽度 */
}
</style>