1、安装vue-print-nb插件 npm install vue-print-nb --save 2、main.js中引用 import Print from 'vue-print-nb' Vue.use(Print) //注册 3、页面源码(复制粘贴即可) <template> 立即打印 <!-- 这句话很重要,如果通过display:none控制显隐会导致点击打印按钮生成空白--> <!--每一页的具体内容-...
(1)把vue-print-nb的文件夹放到自己的文件夹中,在src 下新建utils文件 里面放入src 和index.js src里面是print.js 和printarea.js index.js和print.js是自定义指令有关的,我们需要的只是printarea.js main.js里面修改成如下 代码语言:javascript 复制 //import Print from 'vue-print-nb' //import Print from...
(1)打印隐藏内容 在打印弹框中需求显示查看的内容,但是在打印的时候需要隐藏,不打印显示 print4.png (2)打印单据有2个以上,打印时需要自动分页打印 在一个打印弹框中显示所有的打印单据,但在打印时需要自动分页打印 有多个单据时,可以循环展示,在单据内容的最外层的div设置样式page-break-after:always,即可在打印...
安装npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' 1. Vue.use(Print); 1. 页面中使用,给需要打印的容器加一个id,打印按钮传入这个id html: 葫芦娃,葫芦娃 一根藤上七朵花 小小树藤是我家 啦啦啦啦 叮当当咚咚当当 浇不大 叮当当咚咚当当 是我家 啦啦...
打印插件: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. 第三步、代码编写 ...
在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 ...
这个是介绍的vue3-print-nb插件的视频,简单的打印功能可以简单实现代码不放了,看视频抄代码吧,嗯呢 很刺激,太长了,懒得剪了,虽然短版也没剪, 视频播放量 2041、弹幕量 2、点赞数 12、投硬币枚数 6、收藏人数 22、转发人数 4, 视频作者 铁憨憨的小小白, 作者简介 雨,
前端使用Vue进行打印主要有以下几种方法:1、使用window.print()方法,2、使用第三方库如vue-print-nb,3、创建隐藏的打印区域并使用CSS进行样式控制。 这些方法各有优劣,具体选择需要根据项目需求和实现难度进行权衡。下面将详细介绍每种方法的实现方式和适用场景。 一、
一、安装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 ...
1、将vue项目node-modules中的vue-print-nb/print文件夹下的所有内容拷贝出来，放到项目中。我这里是放到了src/assets/vue-print-nb目录下。2、修改拷贝的源码printarea.js中getBody()返回的。添加样式：style="height:auto"。3、修改main.js中的引用。解决。遗留问题：打印预览的最底部出现空白页，一般是由于margi...