vue项目实现前端打印功能_vue前端打印

作者：从前慢现在也慢 | 2024-02-18 05:38:02

踩

vue前端打印

一、直接使用window自带的打印功能： window.print()

<template>
  <div>
    <p>点击下面的按钮，可将div里的内容区域进行打印</p>

    <div id="printDiv">
      <p>打印内容 </p>
      <p>打印内容 </p>
      <p>打印内容 </p>
      <p>打印内容 </p>
    </div>

    <button @click="print">打印id为printDiv的div区域内容</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{}
    },
    methods: {
      print(){
        window.print()
      },
    }
  }
</script>
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

二、使用打印插件1: vue-print-nb

1、安装 vue-print-nb:

// vue2.x 版本
npm install vue-print-nb --save   
// vue3.x 版本
npm install vue3-print-nb --save
1
2
3
4

2、在项目中引入 vue-print-nb

// vue2.x版本 -- 全局引入：在项目中入口文件 main.js 文件中全局引入 vue-print-nb
import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print)

// vue2.x版本 -- 在需要打印功能的页面引入 vue-print-nb
import print from 'vue-print-nb'
export default{
    directives: { print }
}

// vue3.x版本 -- 全局引入：在项目中入口文件 main.js 文件中全局引入 vue3-print-nb
import {createApp} from 'vue'
import App from './App'
import Print from 'vue3-print-nb'
const app = createApp(App)
app.use(Print)
app.mount('#app')

// vue3.x版本 -- 在需要打印功能的页面引入 vue3-print-nb
import print from 'vue3-print-nb'
export default{
    directives: { print }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3、使用 vue-print-nb 实现打印功能
① 实现方式1：打印区域设置id, 打印按钮绑定此 id

<template>
  <div>
    <p>点击下面的按钮，可将div里的内容区域进行打印</p>

    <div id="printDiv">
      <p>打印内容 </p>
      <p>打印内容 </p>
      <p>打印内容 </p>
      <p>打印内容 </p>
    </div>

    <button v-print="'#printDiv'">打印id为printDiv的div区域内容</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{}
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

② 实现方式2：打印区域设置id, 打印按钮进行打印配置

<template>
  <div>
    <p>点击下面的按钮，可将div里的内容区域进行打印</p>

    <div id="printDiv">
      <p>打印内容 </p>
      <p>打印内容 </p>
      <p>打印内容 </p>
      <p>打印内容 </p>
    </div>

    <button v-print="'printSet'">打印id为printDiv的div区域内容</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          id: 'printDiv',
          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",
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
          beforeOpenCallback (vue) {
            console.log('打开之前')
          },
          openCallback (vue) {
            console.log('执行了打印')
          },
          closeCallback (vue) {
             console.log('关闭了打印工具')
          }
        }
      }
    }
  }
</script>
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

③ 打印网址：打印指定url(同一个同源策略)对应的内容

<template>
    <button v-print="'printSet'">打印网址</button>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          url: 'http://localhost:8080/',
          beforeOpenCallback (vue) {
            console.log('打开之前')
          },
          openCallback (vue) {
            console.log('执行了打印')
          },
          closeCallback (vue) {
             console.log('关闭了打印工具')
          }
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

④ 打印预览功能

```bash
<template>
    <button v-print="'printSet'">打印+预览功能</button>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          url: 'http://localhost:8080/', // 打印网页预览  如果想要打印本地预览，那么可以不用提供url,需提供打印区域的id，例如： id: 'printDiv'
          preview: true,
          previewTitle: 'Test Title',
          previewBeforeOpenCallback (vue) {
            console.log('正在加载预览窗口')
          },
          previewOpenCallback (vue) {
            console.log('已经加载完预览窗口')
          },
          beforeOpenCallback (vue) {
            console.log('打开之前')
          },
          openCallback (vue) {
            console.log('执行了打印')
          },
          closeCallback (vue) {
             console.log('关闭了打印工具')
          }
        }
      }
    }
  }
</script>
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

⑤ 打印异步url

```bash
<template>
    <button v-print="'printSet'">打印+预览功能</button>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          asyncUrl (reslove, vue) {
             setTimeout(() => {
                reslove('http://localhost:8080/')
             }, 2000)
            }, // 异步url
          preview: true,
          previewTitle: 'Test Title',
          previewBeforeOpenCallback (vue) {
            console.log('正在加载预览窗口')
          },
          previewOpenCallback (vue) {
            console.log('已经加载完预览窗口')
          },
          beforeOpenCallback (vue) {
            console.log('打开之前')
          },
          openCallback (vue) {
            console.log('执行了打印')
          },
          closeCallback (vue) {
             console.log('关闭了打印工具')
          }
        }
      }
    }
  }
</script>
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

⑥ vue-print-nb的API配置如下：

1、id: String // 范围打印 ID，必填值

2、standard: String   // 文档类型（仅打印本地范围）

3、extraHead: String // <head></head>在节点中添加DOM节点，并用,(Print local range only)分隔多个节点

4、extraCss: String  // <link>新的 CSS 样式表，并使用,（仅打印本地范围）分隔多个节点

5、popTitle: String // <title></title> 标签内容（仅打印局部范围）

6、openCallback: Function // 调用打印工具成功回调函数

7、closeCallback: Function // 关闭打印工具成功回调函数

8、beforeOpenCallback: Function // 调用打印工具前的回调函数

9、url: String // 打印指定的 URL。（不允许同时设置ID）

10、asyncUrl: Function // 异步网址：通过 'resolve()' 和 Vue 返回 URL

11、preview: Boolean // 预览

12、previewTitle: String // 预览标题

13、previewPrintBtnLabel: String // 预览按钮的名称

14、zIndex: String,Number // 预览CSS：z-index

15、previewBeforeOpenCallback: Function // 启动预览工具前的回调函数

16、previewOpenCallback: Function // 预览工具完全打开后的回调函数

17、clickMounted: Function //点击打印按钮的回调函数
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

三、手动下载插件: print.js，把它放在项目中（我放在项目的utils文件夹中），插件地址为：https://github.com/xyl66/vuePlugs_printjs

// 项目入口文件 main.js 文件

import Vue from 'vue'
import Print from '@/utils/print.js'
Vue.use(Print)

// 需要打印功能的页面中进行使用，例如：home.vue页面
<template>
    <div>
        <div ref="printDiv">
            <p>打印内容区域</p>
            <p>打印内容区域</p>
            <p>打印内容区域</p>
            <p>打印内容区域</p>
            <p>打印内容区域</p>
    

            实现区域不打印方式1：设置class为 no-print 即可实现该区域不打印
            <p class="no-print">不要打印的内容区域</p>

            // 实现区域不打印方式2: 自定义不打印区域的class名
            <p class="do-not-print-div">不要打印的内容区域</p>
        </div> 

        <button @click="printBtnClick">打印按钮</button>       
    </div>
</template>

<script>
export default{
    data(){
        return {}
    },
    methods:{
        printBtnClick(){
            // 注意必须使用ref指定打印区域，如果通过id或者class，那么wenpack打包后打印区域会为空
            this.$print(this.$refs.printDiv) 

            // 实现区域不打印方式2
            this.$print(this.$refs.print, { noPrint: '.do-not-print-div' }) 
        },
    }
}
</script>
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

为了方便大家不用去 github下载 print.js，我把插件 print.js 内容复制下来，放在这里，
大家可以根据自己的情况直接复制下面 js 到项目文件中或者直接去插件 print.js 所在地址下载

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
  if (!(this instanceof Print)) return new Print(dom, options);

  this.options = this.extend({
    'noPrint': '.no-print'
  }, options);

  if ((typeof dom) === "string") {
    this.dom = document.querySelector(dom);
  } else {
    this.isDOM(dom)
    this.dom = this.isDOM(dom) ? dom : dom.$el;
  }

  this.init();
};
Print.prototype = {
  init: function () {
    var content = this.getStyle() + this.getHtml();
    this.writeIframe(content);
  },
  extend: function (obj, obj2) {
    for (var k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },

  getStyle: function () {
    var str = "",
      styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";

    return str;
  },

  getHtml: function () {
    var inputs = document.querySelectorAll('input');
    var textareas = document.querySelectorAll('textarea');
    var selects = document.querySelectorAll('select');

    for (var k = 0; k < inputs.length; k++) {
      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
        if (inputs[k].checked == true) {
          inputs[k].setAttribute('checked', "checked")
        } else {
          inputs[k].removeAttribute('checked')
        }
      } else if (inputs[k].type == "text") {
        inputs[k].setAttribute('value', inputs[k].value)
      } else {
        inputs[k].setAttribute('value', inputs[k].value)
      }
    }

    for (var k2 = 0; k2 < textareas.length; k2++) {
      if (textareas[k2].type == 'textarea') {
        textareas[k2].innerHTML = textareas[k2].value
      }
    }

    for (var k3 = 0; k3 < selects.length; k3++) {
      if (selects[k3].type == 'select-one') {
        var child = selects[k3].children;
        for (var i in child) {
          if (child[i].tagName == 'OPTION') {
            if (child[i].selected == true) {
              child[i].setAttribute('selected', "selected")
            } else {
              child[i].removeAttribute('selected')
            }
          }
        }
      }
    }
    // 包裹要打印的元素
    // fix: https://github.com/xyl66/vuePlugs_printjs/issues/36
    let outerHTML = this.wrapperRefDom(this.dom).outerHTML
    return outerHTML;
  },
  // 向父级元素循环，包裹当前需要打印的元素
  // 防止根级别开头的 css 选择器不生效
  wrapperRefDom: function (refDom) {
    let prevDom = null
    let currDom = refDom
    // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
    if (!this.isInBody(currDom)) return currDom

    while (currDom) {
      if (prevDom) {
        let element = currDom.cloneNode(false)
        element.appendChild(prevDom)
        prevDom = element
      } else {
        prevDom = currDom.cloneNode(true)
      }

      currDom = currDom.parentElement
    }

    return prevDom
  },

  writeIframe: function (content) {
    var w, doc, iframe = document.createElement('iframe'),
      f = document.body.appendChild(iframe);
    iframe.id = "myIframe";
    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
    var _this = this
    iframe.onload = function(){
      _this.toPrint(w);
      setTimeout(function () {
        document.body.removeChild(iframe)
      }, 100)
    }
  },

  toPrint: function (frameWindow) {
    try {
      setTimeout(function () {
        frameWindow.focus();
        try {
          if (!frameWindow.document.execCommand('print', false, null)) {
            frameWindow.print();
          }
        } catch (e) {
          frameWindow.print();
        }
        frameWindow.close();
      }, 10);
    } catch (err) {
      console.log('err', err);
    }
  },
  // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
  isInBody: function (node) {
    return (node === document.body) ? false : document.body.contains(node);
  },
  isDOM: (typeof HTMLElement === 'object') ?
    function (obj) {
      return obj instanceof HTMLElement;
    } :
    function (obj) {
      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    }
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  // 4. 添加实例方法
  Vue.prototype.$print = Print
}
export default MyPlugin
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
153
154
155
156
157
158
159
160
161
162
163

四、总结

除了上面的两个插件，也还是有很多其他插件，比如：print-js插件、jQuery的打印插件等，打印的实现方式也是多样，除了像上面那样直接使用打印插件，也可以先使用html2canvas截图为img,再使用打印插件将img进行打印，这样能更好的保证排版和布局

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/105270

vue项目实现前端打印功能_vue前端打印

一、直接使用window自带的打印功能： window.print()

二、使用打印插件1: vue-print-nb

三、手动下载插件: print.js， 把它放在项目中（我放在项目的utils文件夹中），插件地址为：https://github.com/xyl66/vuePlugs_printjs

四、总结

三、手动下载插件: print.js，把它放在项目中（我放在项目的utils文件夹中），插件地址为：https://github.com/xyl66/vuePlugs_printjs