首页 前端知识 Vue利用vue-print-nb实现打印功能

Vue利用vue-print-nb实现打印功能

2024-05-26 00:05:55 前端知识 前端哥 725 347 我要收藏

一、安装vue-print-nb

没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。

Vue2.0版本安装方法:

npm install vue-print-nb --save
yarn add vue-print-nb

 Vue3.0版本安装方法:

npm install vue3-print-nb --save
yarn add vue3-print-nb

 二、引入Vue项目

Vue2.0引入方式: 

1. 全局挂载,在main.js中引入并注册

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

 2. 自定义指令

import print from 'vue-print-nb'
directives: {
  print
}

Vue3.0引入方式:

1. 全局挂载

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')

2. 自定义指令

import print from 'vue3-print-nb'
directives: {
    print   
}

三、在组件中使用

注意:一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id

<!--//需要打印的页面-->
<div id="printMe" ref="printContent">
        <div class="hammer">
            <h3>标题标题标题标题标题标题标题标题标题标题</h3>
        </div>
        <!-- //内容 -->
        <div class="trail">
            <p>内容内容内容内容内容内容内容内容</p>
        </div>
</div>
<!--//通过按钮来调用-->
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button>

data:

printObj: {
   id: 'printMe',//id
   popTitle: "标题",//自定义设置标题
},

四:插件优化

1.去掉页眉页脚

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

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

只需要给不自动换行的标签加上 word-wrap:break-word 即可。

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

 五、简单例子

<template>
  <div class="hello">
    <h2>Essential Links</h2>
    // 局部打印文本以及按钮
    <div id="printArea">Print Area</div>
    <button v-print="print">Print!</button>
  </div>
</template>

script示例:

export default {
  name: 'HelloWorld',
  data () {
    let that = this
    return {
      msg: 'Welcome to Your Vue.js App',
      print: {
        id: 'printArea',
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '打印', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
        preview: true, // 是否启动预览模式,默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
        zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
        previewBeforeOpenCallback () { console.log('正在加载预览窗口!'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
        previewOpenCallback () { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback
        beforeOpenCallback () { console.log('开始打印之前!') }, // 开始打印之前的callback
        openCallback () { console.log('执行打印了!') }, // 调用打印时的callback
        closeCallback () { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted () { console.log('点击v-print绑定的按钮了!') },
        // url: 'http://localhost:8080/', // 打印指定的URL,确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  }
}

注意点
Callback函数中this指向当前print object对象,that返回Vue对象;
不需要页眉页脚可以在打印弹窗页面的更多设置里面取消选择;
不设置popTitle参数页眉标题为undifined;
popTitle参数为空时,页眉标题默认为Document Title。

六、参数说明

参数作用类型可选项默认值
id局部打印有效,标识符string-‘printId’
standard局部打印有效,打印的文本类型stringHTML5/loose/stricthtml5
extraHead局部打印有效,添加在打印区域的最顶端string--
extraCss局部打印有效,为打印区域提供Stylesheet样式表string--
popTitle局部打印有效,编辑页眉的标题string-Document Title
clickMounted全局有效,调用v-print绑定的按钮点击事件callbackFunction-this.Object
openCallback全局有效,调用打印时的callbackFunction-this.Object
closeCallback全局有效,调用关闭打印的callback(无法区分确认or取消)Function-this.Object
beforeOpenCallback全局有效,调用开始打印之前的callbackFunction-this.Object
preview全局有效,控制打印预览Booleantrue/falsefalse
previewTitle编辑预览页面的预览标题string-'打印预览'
previewPrintBtnLabel编辑预览页面的打印按钮文本string-'打印'
previewBeforeOpenCallback调用打开预览页面之前的callbackFunction-this.Object
previewOpenCallback调用打开预览页面之后的callbackFunction-this.Object
url非局部打印有效,异步加载打印指定的URL,确保同源策略相同string--
asyncUrl非局部打印有效,异步加载打印指定的URL,确保同源策略相同Function--
zIndex预览有效,预览窗口的z-index,默认是20002,最好比默认值更高string,Number-20002
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9548.html
标签
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!