Vue 中实现点击打印功能 vue网页打印vue-easy-print

最新推荐文章于 2024-06-14 17:20:12 发布
最新推荐文章于 2024-06-14 17:20:12 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45925420/article/details/127832686
版权

Vue 中实现点击打印功能 vue网页打印vue-easy-print

  1. 首先我们在vue中输入

npm install vue-easy-print –save

  1. 我们需要在需要用到的页面引入插件

Import vueEasyPrint form ‘vue-easy-priny’;

  1. 继续将需要打印的部分，使用下放标签包裹即可

<vue-easy-print ref="easyPrint" tableShow></vue-easy-print>

4.   点击触发，自定义点击事件，事件中执行如下代码即可实现页面打印

this.$refs.easyPrint.print()

鱼鱼鱼家闺女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
easy-print:在模板上轻松打印
06-30
Easy-Print JS 在模板上轻松打印。 该库旨在填充打印模板。 即打印发票、填写打印表格等。 如何 即将推出 运行示例 将此 repo 克隆到您的本地。 导航到根文件夹 安装静态网络服务器。 即： npm install wup 运行本地服务器。 即： wup 转到您的浏览器并打开示例index.html 。 即： http://localhost:8080/examples/index.html 尝试并享受。 示例也位于： : 贡献 和是必需的。 Fork 这个 repo 将其克隆到您的本地 运行npm install 运行grunt build 为新功能/错误修复创建测试 使用grunt test运行grunt test 添加新代码 添加示例并运行grunt server进行测试 发出拉取请求 :) 版权所有 (c) 2014-2015 Pablo
vue实现打印功能的两种方法
10-18
主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
vue-easy-print 项目中页面打印实现（去除页眉页脚）
热门推荐
掘金者说
08-10 1万+
项目中页面打印实现vue-easy-print调整UI vue-easy-print 调整UI 去掉页眉页脚， 正常 print() 浏览器会带页眉和页脚，包含日期、页码、页面title、当前url，这些信息往往不适合打印出来，所以需要去掉 <style scoped> @page{ size: auto A4 landscape; margin: 3mm; } </s...
vue-点击打印-使用vue-easy-print
最新发布
sun2829191346的博客
06-14 241
vue-点击打印-使用vue-easy-print中出现的问题
Vue实现打印功能
夏夏
06-21 2373
在vue项目中实现打印功能有一款非常好用的组件，那就是vueEasyPrint,这是一个基于vue 2.0的打印组件。 使用步骤： 1.npminstallvue-easy-print--save 2.在需要打印的页面引入：importvueEasyPrintfrom"vue-easy-print"; 3.在需要打印的页面引入你的模板：importprintPlatefrom"./printPlate.vue"; exportdefault{ components...
vue项目实现打印功能
u011200562的博客
05-31 397
使用的一个叫做“vue-print-nb”的插件，具体步骤： 1.下载插件：npm installvue-print-nb --save 2.在main导入并注册： // 打印 import Print from 'vue-print-nb' // 注册 Vue.use(Print) 3.在vue文件使用 3.1在需要打印的区域添加一个id 3.2给打印按钮添加一个v-print指令，如：v-print=“printID” 具体代码如下： <div id="printDiv"> .
vue中使用vue-print.js实现多页打印
11-21
在Vue项目中，有时我们需要为用户提供打印功能，这时可以借助vue-print.js这个库来实现。本文将详细讲解如何在Vue环境中使用vue-print.js解决多页打印、分页以及打印预览样式修改的问题。 首先，我们需要引入和安装...
Vue实现浏览器打印功能的代码
10-15
在Vue.js应用中实现浏览器打印功能，通常会借助第三方库来简化这个过程。在这个示例中，使用了"vue-easy-print"库。这个库提供了一种简单的方式来为Vue组件添加打印功能，允许用户选择性地打印页面内容。 首先，...
vue打印插件使用
11-26
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: { ...
vue使用printJs实现前端打印,以及打印分页实现
Arcobaleno_1177的博客
08-08 6017
在web端可以直接使用原生调用方法调用打印,但是往往需要单独把需要打印的东西拎出来画一个单独的html,而使用printJs则可选中你需要打印的代码块,进行页面局部打印。
vue打印功能
weixin_42489478的博客
08-03 410
先下载https://github.com/xyl66/vuePlugs_printjs 在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下，然后操作如下 在main.js中引入 import Print from '@/plugs/print' Vue.use(Print) // 注册 vue组件中 <template> <se...
vue附件名字显示打印机的解决方案
11-01
vue附件名字显示打印机的解决方案
一个好页面打印实例print
08-23
一个好的打印例子，有打印设置，打印预览，简单方便
记一次Electron+vue实现动态打印小票
qq_52965813的博客
07-26 3479
electron+vue3打印
vue打印小票
rikimiao的博客
08-31 1014
vue打印小票
vue打印 vue-print-nb
weixin_58346650的博客
04-28 1937
安装相关插件 cnpm i vue-print-nb --save 在main.js里面全局引用 import Print from 'vue-print-nb' // 引入 Vue.prototype.$print = Print; // 挂载 Vue.use(Print); // 使用 页面代码 <button v-print="print" type="primary"> <span>打印</span> </button>
vue中实现打印
weixin_39255905的博客
01-28 9245
vue中实现打印
vue中实现打印功能的方法与注意事项
weixin_44463883的博客
06-06 9305
vue中实现打印功能的方法与注意事项
vue-easy-print
05-01
Vue Easy Print是一款应用于Vue.js的打印插件，它提供了简单易用的基于Vue组件的...总体来说，Vue Easy Print使得在Vue.js应用中添加打印功能变得非常简单，使得用户可以通过少量的代码来实现高度可定制化的打印功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值