vue3使用vue3-print-nb打印；vue3直接触发打印窗口

作者：笔触狂放9 | 2024-08-05 23:57:42

踩

vue3-print-nb

打印效果

1.下载插件

Vue2.0版本安装方法

npm install vue-print-nb --save
1

Vue3.0版本安装方法：

npm install vue3-print-nb --save
1

2.main.js引入

vue2引入

import Print from 'vue-print-nb'
Vue.use(Print)
1
2

vue3引入

import print from 'vue3-print-nb' // 打印插件
app.use(print)
1
2

3.页面使用（代码可直接复制）

注意这是vue3代码：
需要注意点：
1.打印id需要设置打印id必须放在单独的一个div上否则样式会错乱不要放在el-form上

2.某个元素的显示隐藏可以使用手动写的这三个class处理：.no-print .show-print .page-no 。原理： #printMe下的css样式是你打印弹窗里的的那些样式，它不会影响到你本身页面的样式，所以你可以页面一种样式，具体打印一种样式。

3.修改打印弹窗里的样式，具体效果调试方法：你可以选择弹窗里的【另存为PDF】， 这样就能看出效果，方便调试。

4.我如果不设置width: 1078px !important; 有的具体打印样式宽度不对

5.直接打印：一般是用户在A页面点击打印按钮，浏览器打开一个新的B页面，B页面直接调用起打印的窗户。实现该需求，只需要将onMounted代码里的那部分注释打开即可；

6.基于4的要求更优解： 在A页面点击打印按钮，使用window.open打开新页面

    let url = window.location.href.replace('/page/A', '/page/B')
    // 在新标签页中打开B页面
    window.open(url, '_blank')
1
2
3

然后再B页面直接召唤起打印弹框，点击打印或者取消按钮后，在起钩子函数内使用window.close()关闭B页面

<template>
  <div style="background-color: #fff;width: 100%;height: 100%;overflow-y: scroll;">
    <div>
      <el-button @click="printForm">原生打印</el-button>
      <el-button ref="printButton" v-print="printObj">插件打印（推荐）</el-button>
      <el-button v-print="printObj2">打印表单2</el-button>
    </div>

    <div>页面其他内容：无需打印部分无需打印部分无需打印部分无需打印部分无需打印部分</div>

    <!-- 打印的元素设置id 打印id必须放在单独的一个div上 否则样式会错乱 不要放在el-form上 -->
    <div id="printMe">
      <div style="height: 100px;background-color: #1fff;">打印区域内的内容1</div>
      <div style="height: 100px;display: flex;">
        <div style="flex: 1;">打印区域内的内容2:左</div>
        <div style="width: 130px;">打印区域内的内容2：右</div>
      </div>
      <div class="no-print" style="width: 200px;height: 100px;background-color: #18ff00;">333333：默认页面显示，但是打印时候不想显示</div>
      <div class="page-no show-print" style="height: 100px;width:100%;background-color: #ff008d;font-size: 32px;font-weight: 700;">444444：默认页面不显示，但是打印时候显示
      </div>

      <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="index">
        <div style="height: 300px;border-bottom: 1px solid red;">打印区域内的内容{{ item }}</div>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 原生打印
const printForm = () => {
  const printMe = document.getElementById('printMe');
  const printWindow = window.open('', '_blank');
  printWindow.document.open();
  printWindow.document.write('<html><head><title>打印</title>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(printMe.innerHTML);
  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.onload = function () {
    printWindow.print();
    printWindow.close();
  };
}

// 插件打印（推荐）
const printObj = ref({
  id: "printMe", // 这里是要打印元素的ID
  // url:'https://www.baidu.com/',
  popTitle: "打印表单", // 打印的标题
  // extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", // 打印可引入外部的一个 css 文件
  // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 打印头部文字
  // preview: true, // 是否启动预览模式，默认是false
  previewTitle: '打印客户账单', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20003, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback(vue) {
    vue.printLoading = true
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback(vue) {
    vue.printLoading = false
    console.log('监听到了打印窗户弹起了！')
  }, // 调用打印时的callback
  closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(点击弹窗的取消和打印按钮都会触发)
  clickMounted() { console.log('点击v-print绑定的按钮了！') },

})

// 通过ref获取打印按钮的引用
const printButton = ref(null)

// 打印表单2（暂未了解）
const printObj2 = ref({
  ids: [], // 这里是要打印元素的ID
})

onMounted(async () => {
  await nextTick()

  // 如果需要一进入该页面就执行打印 就打开注释
  // setTimeout(() => {
  //   if (printButton.value) {
  //     printButton.value.$el.click()
  //   }
  // }, 10);
})


</script>

<style lang="scss">
/* 打印时的样式--仅仅是打印和预览生效--不改变原页面样式 */
@media print {
  body {
    font-size: 12pt;
    color: black;
    // background: rgb(247, 175, 175); // 背景色需要再打印弹框里勾选才生效
  }

  /* 调整布局以适应打印 */
  #printMe {
    // border: 2px solid greenyellow;
    // width: 100% !important;
    width: 1078px !important; //794px;
    margin: 0;
    padding: 0px;

    /* 隐藏不需要打印的元素 */
    .no-print {
      display: none;
    }

    /* 将原先隐藏的元素 显示在打印内容里 */
    .show-print {
      display: block;
    }

    // 特殊处理样式
    .abc {
      background-color: #1fff; // 背景色需要再打印弹框里勾选才生效
      color: red;
    }

  }

  /* 其他打印样式 */
}

@page {
  /* auto is the initial value */
  size: auto;

  /* 打印边距-会影响页眉页脚显示 */
  // margin: 5mm 5mm 5mm 5mm;
}

// 页面上直接隐藏
.page-no {
  display: none;
}

// 以下是页面的其他样式css
div {}
</style>

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】