vue2,vue3-调用浏览器打印窗口,或者打印机

最新推荐文章于 2024-07-04 23:12:21 发布

Fever_昵称

最新推荐文章于 2024-07-04 23:12:21 发布

阅读量1.4k

点赞数

文章标签： css3 html5 前端

本文链接：https://blog.youkuaiyun.com/qq_57094383/article/details/121791788

版权

本文介绍了在Vue2和Vue3项目中如何使用`vue-print-nb`库来调用浏览器的打印窗口，包括在`main.js`中注册依赖、在组件内使用方法以及定义各种回调函数。同时，详细讨论了打印属性如`id`、`preview`、`previewTitle`、`popTitle`和`extraCss`，允许自定义打印样式和预览设置。

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

vue3-print-nb - npm

下载依赖

yarn add vue-print-nb

在全局main.js内注册依赖

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

在.vue 文件内先注册命令

import print from 'vue3-print-nb'
export default {
  directives: {
    print,
  },
}

.vue 文件内使用

// v-print 命令调用浏览器打印界面
<el-button type="primary" size="small" v-print="printObj">登记</el-button>

// 打印内容
<div id="test" v-show="print_flag">
   <img src="@/assets/print.jpg" alt="" /&