vue实现打印功能的两种方法/web打印控件

最新推荐文章于 2024-05-01 01:16:08 发布
最新推荐文章于 2024-05-01 01:16:08 发布
阅读量2.1k 收藏 3
点赞数
文章标签： 前端 vue.js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55551893/article/details/121613888
版权

第一种方法：通过npm 安装插件

1，安装  npm install vue-print-nb --save

2，引入  安装好以后在main.js文件中引入     

1

2

import Print from 'vue-print-nb'

　　Vue.use(Print); //注册

3，现在就可以使用了　　

1

2

3

4

5

6

7

<div id="printTest" >

　　　　　<p>锄禾日当午</p>

　　　　　<p>汗滴禾下土 </p>

　　　　　<p>谁知盘中餐</p>

　　　　　<p>粒粒皆辛苦</p>

　　　</div>

　　　<button v-print="'#printTest'">打印&
最低0.47元/天 解锁文章
老张头oo
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue蓝牙扫码打印demo
12-25
vue蓝牙扫码打印demo
vue 打印（模板套打）
01-08
vue 使用  print-template 生成pdf 打印 。支持生成二维码、条形码、文本、图片、线  安装 yarn add print-template 或 npm install print-template 内容类型 line 线条 barcode 条形码 qrcode 二维码 image 图片 text 文本 内容属性 通用 x 必须 所有类型  y 必须 所有类型  default 固定内容默认值 线条 【line】 length 线条长度 number orientation 线条方向   p 竖线 / l 横线 s
【vue】实现打印功能_vue 打印
最新发布
2401_84413010的博客
05-01 724
（4）打印最好使用原生table标签，使用其他ui框架会出现很大的样式问题，使用原生table表格要自己重写表格边框，不然会出现表格边框很粗的情况，预览时看不出来，打印就很明显。在使用了单元格合并也会出现表格边框有的粗有的细的情况，目前还在研究如何解决。（2）css设置打印时强制分页，使用这个属性，该div的以后的内容就会在打印时分页（此属性在div display属性为flex时无效，使用了浮动float时也会无效）【1】把官方提供的LodopFuncs.js文件保存到项目某个目录下。
vue打印插件使用
11-26
vue打印插件使用 第一步: npm install vue-easy-print --save 第二步，在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: slot-scope func.getChineseNumber接收到的方法是一个将金额转换成中文的 配置props参数 // 针对分页表格模式：末尾空白行插入 spaceRow: { type:Boolean, default:false, }, // 针对分页表格模式：传入的打印数据。 tableData:{ type:Object, default() { return undefined } }, // 是否显示表格 tableShow:{ type:Boolean, default:false }, // 每页多少行 onePageRow: { type:Number, default:5, }, // 复制打印页面前调用的钩子 beforeCopy:Function, // 打印页面前调用的钩子 beforePrint:Function,
vue实现打印功能的两种方法
didumin1941的博客
03-28 3041
第一种方法：通过npm 安装插件 1，安装npm install vue-print-nb --save 2，引入 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' 　　Vue.use(Print); //注册 3，现在就可以使用了 <div id="printTes...
Vue项目实现web端打印页面
我的博客
02-25 445
一、封装一个print.js文件，放在目录/utils下 // print.js export function clear () { const iframes = document.body.querySelectorAll('iframe.print-iframe') iframes.forEach(iframe => { document.body.removeChild(iframe) }) } export function print (el) { //
vue 实现前端点击打印png
m0_58405110的博客
01-17 211
vue 实现前端点击打印png
vue打印插件，使用教程
最初都是小白
11-25 4160
第一步：文件里新增一个print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) ===
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue实现浏览器打印功能的代码
10-15
主要介绍了Vue实现浏览器打印功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Web打印控件
04-18
web打印的好东西，千万不要错过，10分解决你Web打印问题，内附多种打印实例，简单实用，只能设置10分资源分，真想要50分！！！ 专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码生成复杂打印页。 控件功能强大,却简单易用,所有调用如同JavaScript扩展语句 1. 如何在页面内嵌入控件见样例一 2. 如何选材打印当前页面内容见样例二 3. 如何用代码生成打印页见样例三 4. 如何打印设计和定位套打见样例四 5. 如何控制纸张大小和连续打印见样例五 6. 如何输出多页长文档及双面打印见样例六 7. 如何定向输出见样例七 8. 如何打印图片见样例八 9. 如何用程序加载打印维护背景图见样例九 10 如何控制打印样式(STYLE)见样例十 11 如何打印条码图案见样例十一 12 如何读写本地文件见样例十二 13 如何打印旋转内容见样例十三 14 如何按URL打印见样例十四 15 如何打印表格的页头页尾见样例十五 16 如何设置预览窗口大小见样例十六 17 如何发打印机指令或直接读写端口见样例十七 18 如何打印幅面高度不固定的票据见样例十八 19 如何内嵌显示及预览时包含背景图见样例十九 20 如何强制分页并预览多页卡片见样例二十 21 如何控制打印维护的功能权限见样例二十一 22 如何构建自己的纯WEB打印预览见样例二十二 23 如何居中打印超文本见样例二十三 24 如何选择界面皮肤见样例二十四 25 如何指定输出到哪页或仅预览见样例二十五
VUE前端+Node后台模拟打印机Web即时打印.zip
06-26
资源包含文件：设计报告word+项目源码+项目截图 使用 VUE 框架 + Element UI 开发 Web 前端，使用 Node 的 Express 框架来模拟打印机后端，前端使用 axios 通信框架向 Express 发送请求，Express 接收到请求后，模拟打印机把设定的参数保存到文件中，把收到的打印文件数据保存到一个固定的目录中。如果目录中的文件可以完整的打开，就说明数据收到正确。 详细介绍参考：https://blog.csdn.net/newlw/article/details/125474186
vue2iview2admin基于vue2Iview2的web在线打印管理系统
08-13
vue2-iview2-admin 是基于vue2 iview2 axios webpack2 为主要技术，开发的一个后台管理系统
electron + vue项目实现打印小票功能及实现代码
10-17
主要介绍了electron + vue项目实现打印小票功能,需要的朋友可以参考下
vue使用lodop打印控件
Daisy
09-09 715
1.下载安装C-Lodop http://www.lodop.net/download.html 2.新建一个LodopFuncs.js文件
在vue中实现打印功能（vue-easy-print使用）
qq_48378883的博客
06-19 1885
vueEasyPrint ref="printRef" tableShow> //用ref绑定打印组件。//调用打印内容的print方法。4.将需要打印的内容填写在vueEasyPrint组件中。2.在需要打印的页面中导入vue-easy-print。>打印xxxx
如何利用vue实现打印功能
X_W123的博客
11-27 2498
vue实现打印功能 vue自带插件可以实现打印功能，这就需要我们本地安装这个插件。 1、安装 npm install vue-print-nb --save 判断如何安装成功：package.json文件搜索print查看是否有，其实所有判断插件是否安 装成功都可以这样。 2，引入 安装好以后在main.js文件中引入 import Print from ‘vue-print-nb’ 　　Vue.use(Print); //注册 3、如何使用 打印按钮上加上自定义指令v-print，这个是v
VUE实现打印功能的两种方法
weixin_43173924的博客
09-19 455
转：https://blog.csdn.net/FireBird_one/article/details/83340724 window.print()方法也很好用： https://blog.csdn.net/nanguaxiaoxi/article/details/79280007 打印方法： printBtn(){ letsubOutputRankPrint=d...
vue用vue-print-nb实现打印功能
03-07
Vue-Print-NB是一个基于Vue.js的打印插件，它可以帮助我们在Vue项目中实现打印功能。使用Vue-Print-NB，我们可以轻松地将指定的DOM元素打印成PDF或者图片格式。 要使用Vue-Print-NB，首先需要安装该插件。可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值