vue 文档打印功能的实现

前端小菜鸡ππ队

已于 2022-08-10 09:46:01 修改

阅读量873

点赞数

CC 4.0 BY-SA版权

分类专栏：前端总结文章标签：前端

于 2022-08-04 16:31:29 首次发布

本文链接：https://blog.csdn.net/jkhedge/article/details/126135378

前端总结专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在 Vue 项目中安装和使用 vue-print-nb 插件进行页面打印。首先，通过 npm 安装该插件，然后在 main.js 中全局注册。在具体的使用场景中，展示了如何在按钮点击事件中调用打印功能，打印指定 ID 的内容，并定义打印前和打印后的回调函数。示例中，打印的内容来自一个带有 id 'container' 的 div 元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装 "vue-print-nb": "1.7.5",

npm install vue-print-nb --save

2.使用

在main.js中全局注册

import Print from 'vue-print-nb'

Vue.use(Print)

具体使用

<el-button type="primary" v-print="printObj">打印</el-button>
<div id="container" class="container">
各种组件
</div>

data(){
    printObj:{
          id:"container", //需要打印的id名称
          popTitle:"打印的名称",//文档的名称
          beforeOpenCallback (vue) {
            console.log('打开之前')
          },
          closeCallback (vue) {
            console.log('关闭了打印工具')
          }
        },
}

项目搬运工