1、npm install vue-print-nb --save 二、引入Vue项目 在main.js中添加-- 全局挂载 import Print from 'vue-print-nb' Vue.use(Print) 三、前端代码 一、操作项中的打印按钮 <svg-icon icon-class="printer"class="svgicon"@click="showPrinterDialog(scope.row)"/> 二、打印组件 <!-- 打印内容 -...
您可以通过在需要隐藏的div上添加class="no-print",然后在打印样式中设置该类的display属性为none来实现隐藏。具体步骤如下: 在需要隐藏的 div 上(测试 必须是 div 标签)添加class="no-print",例如: 这是需要隐藏的内容 在打印样式中设置该类的display属性...
vue-print-nb是一个用于Vue.js的轻量级打印插件,它允许开发者轻松地将页面或特定元素转换为可打印格式,并提供了额外的功能如预览和生成PDF。该插件支持Vue 2和Vue 3版本,且具备简单、快捷、便利、轻量等出色优点。 二、在Vue项目中安装vue-print-nb库 根据项目的Vue版本,选择合适的命令进行安装: Vue 2版本: ...
前端环境:Vue2 打印插件:vue-print-nb Node版本:v16.20.2 第一步、安装依赖 npm install vue-print-nb 1. 第二步、引入插件 /** * main.js / import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print) 1. 2. 3. 4. 5. 6. 第三步、代码编写 打印参数说明 id: "printDomId"...
1、安装vue-print-nb依赖 (1)vue2安装方式 (2)vue3安装方式 2、在main.js中全局注册 (1)vue2注册方式 (2)vue3注册方式 3、基础...
Vue2和Vue3使用vue-print-nb实现打印功 Vue2使用vue-print-nb实现打印功Vue3使用vue3-print-nb实现打印功 Vue2 Vue2.0版本安装方法: npm install vue-print-nb --save // 1. 全局挂载 import Prin
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. 自定义指令 ...
-- <el-button v-print="'#printTest'">打印</el-button> --> <el-button @click="adjustWidth">调整宽度</el-button> </template> export default { data() { return { widthData: "100%", inputValue: "", areaContent: "", myChart1: null, myChart2: null, closeBtn: true, tableData...
// 2. 自定义指令importprintfrom'vue-print-nb'directives: {print} AI代码助手复制代码 Vue3.0引入方式: // 1. 全局挂载import { createApp }from'vue'import Appfrom'./App.vue'importprintfrom'vue3-print-nb'constapp=createApp(App) app.use(print) ...
@mediaprint{//media标签@page{size:A5 portrait;//设置纸张及其方向 portrait:纵向; landscape: 横向margin-top:0mm;//去掉页眉margin-bottom:0mm;//去掉页脚margin:2mm3mm;:设置左边距和右边距为2毫米,上边距和下边距为3毫米。}h4{color:red;//打印时将标签h4设置为红色}p{page-break-before:always;}:在...