如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印

你好，我是小白Coding日志，一个热爱技术的程序员。在这里，我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客，一起在技术的世界里探索前行吧！

前言

在前端开发中，经常需要打印页面的特定部分，比如客户列表或商品详情页。要快速实现这些功能，可以使用 vue3-print-nb 插件。它通过对 DOM 元素的操作和 CSS 样式的处理，轻松实现页面内容的打印功能。

安装

当前示例以Vue3+ElementPlus为例，如果要使用vue2版本的就安装npm install vue-print-nb --save。

npm install vue3-print-nb --save
1

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import print from 'vue3-print-nb'
import './style.css'
import App from './App.vue'
const app = createApp(App)

app.use(ElementPlus)
app.use(print)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11

使用

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>

<template>
  <h1>{{ msg }}</h1>
  <div class="btn">
    <el-button type="primary" v-print="'#printTable'">打印</el-button>
  </div>
  <el-table id="printTable" :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

只需要在要打印的元素上通过v-print属性即可实现打印的效果，可以选择打印全部或者打印指定页面，比如我只想要打印el-table表格部分，只需要在el-button按钮上面绑定v-print="'#printTable'"，我已经提前在el-table上定义好了id="printTable"，v-print的属性值对应的就是el-table。
打印效果预览