可以使用 vue-print-nb 插件动态生成 HTML 内容并进行打印。vue-print-nb 是一个 Vue 插件,它允许你在 Vue 应用中轻松实现打印功能。你可以通过动态生成 HTML 内容,并将其绑定到打印指令上,从而实现动态内容的打印。 以下是一个简单的示例,展示了如何使用 vue-print-nb 动态生成 HTML 内容并进行打印: ...
一、安装vue-print-nb 没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。 Vue2.0版本安装方法: npminstall vue-print-nb --saveyarnadd vue-print-nb Vue3.0版本安装方法: npm install vue3-print-nb --save yarn add vue3-print-nb 二、引...
vue3.x npm install vue3-print-nb --save 二、在main.js文件中注册 vue2.x import Printfrom'vue-print-nb'Vue.use(Print); vue3.x import { createApp }from'vue'import Appfrom'./App.vue'import print from 'vue3-print-nb'constapp =createApp(App)app.use(print)app.mount('#app') 三、...
第一步、安装依赖 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", // 需要打印的容器ID extraCss: "", // 打印时引入一...
1、cnpm i vue-print-nb 2、触发事件:v-print="printObj" 3、触发的是个对象: printObj:{ id: 'print', //需要打印的盒子 popTitle: this.$route.query.matterName,
1.安装依赖yarn add vue-print-nb(npm install vue-print-nb --save) 2.页面引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 import Vue from 'vue' 3.页面内容 <!-- 打印模板 --> //必须加id 采购订单 日期姓名
(1)把vue-print-nb的文件夹放到自己的文件夹中,在src 下新建utils文件 里面放入src 和index.js src里面是print.js 和printarea.js index.js和print.js是自定义指令有关的,我们需要的只是printarea.js main.js里面修改成如下 代码语言:javascript 代码运行次数:0 运行 AI代码解释 //import Print from 'vue-prin...
npm install vue-print-nb --save 使用 <!-- 强制分页 --> 打印的内容 打印 data() { return { printObj: {//打印 id: "printTest", popTitle: "标题", extraHead: '', openCallback (vue) {}, closeCallback (vue) {}, }, 强制分页 ...
使用vue-print-nb打印，当数据很多时，打印预览显示不全。原因：首先，为了使打印按钮始终固定显示在页面上部，对id=”print”所在的div的高度进行了计算，使其正好布满剩余屏幕高度。v-html引用的datas是从后端请求来的，由于数据很多，超出了一屏，且其父容器id=”print”设置了：overflow-y: auto;，使id=”...
如何使用在Vue项目输入npm i vue-print-nb 安装后在Vue项目中进行引入 import Print from 'vue-print-nb' 先在项目中进行跑一跑 再在打印机中添加打印按钮 选择打印会覆盖整个页面 会整个打印全部页面 如果想要实现局部打印: 局部打印HTML的写法,标签写着id 局部打印的写法,这里...