vue3 + TS 实现点击按钮打印功能(vue-easy-print)

最新推荐文章于 2024-03-20 15:11:47 发布
VIP文章 最新推荐文章于 2024-03-20 15:11:47 发布
阅读量4k 收藏 7
点赞数 9
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49875821/article/details/121929659
版权

首先 npm 下载插件

npm install vue-easy-print --save

第二步 对应页面引入文件 

import vueEasyPrint from 'vue-easy-print'

这可能会报错 代码检查会报一个找不到这个文件的错 

 是因为 ts 这里的验证 找不到翻译文件 (.d.ts)

所以我这网上找的解决办法就是在 src 文件下 创建一个 .d.ts

declare module 'vue-easy-print'

最低0.47元/天 解锁文章
Caroline0812
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vue实现浏览器打印功能的代码
11-20
Vue实现浏览器打印功能 实际项目中使用vue实现调用本地打印机打印功能 import vueEasyPrint from “vue-easy-print”; 1.导入 “vue-easy-print” 2.编写打印模板 <!-- 分页 --> 用户昵称 归属
vue2/vue3实现打印功能（vue-print-nb）！
weixin_73077230的博客
01-15 1067
详细参考文章保证一路畅顺！
vue-print-nb 打印插件超详细入门教程
最新发布
钱多多的博客
03-20 715
是在Vue中可以实现打印功能的第三方的插件，项目中指定某些区域进行打印时常用该插件，使用起来简单方便。
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打印插件使用
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-cli3+ts+webpack实现多入口多出口功能
12-08
最近公司有一个需求，需要在项目里面嵌套h5的页面，而且不止有一个嵌套的页面，那么就想办法运用webpack的多入口多出口的打包模式，网上查了很多资料，也有多入口多出口的案例，github上也有相应源码，我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包，相应的多入口多出口的源码在 这里 。使用的是vue2.x + webpack3.x集成的多入口多出口，感兴趣的小伙伴可以看看。 然而，公司领导要求项目里面集成ts进行开发，对于字段的类型有更好的控制，所以在配合多入口多出口的前提下，还要配合ts进一步做一些调整。我本人开发路子可能前期走的野，反而加上tslint之后，被一堆类型检查，语法
在vue中实现打印功能（vue-easy-print使用）
qq_48378883的博客
06-19 1824
vueEasyPrint ref="printRef" tableShow> //用ref绑定打印组件。//调用打印内容的print方法。4.将需要打印的内容填写在vueEasyPrint组件中。2.在需要打印的页面中导入vue-easy-print。>打印xxxx
vue-easy-print批量分页打印
qq_41737172的博客
05-20 4392
import vueEasyPrint from “vue-easy-print”; 1打印页作为子组件,要打印的数据,由父组件请求获得, 再传给子组件 ( 注意 vm 和 css) 2 子组件watch, 当子组件准备完毕, 调用父组件的开启打印功能 <template> <div class="item"> <el-button @click="print">批量打印保险卡</el-button>
VUE中实现打印功能插件—vue-easy-print
luofei_create的博客
06-23 5242
vue使用插件vue-easy-print实现打印功能
使用VueBarcode结合vueEasyPrint打印条形码标签
CSNZのBlog
02-12 3067
VueBarcode + VueEasyPrint 合体,生成标签并实现打印功能
Vue实现浏览器打印功能
weixin_38545056的博客
04-15 8811
Vue实现浏览器打印功能 实际项目中使用vue实现调用本地打印机打印功能 import vueEasyPrint from "vue-easy-print"; 1.导入 “vue-easy-print” 2.编写打印模板 <template> <div> <div > <!-- 分页 --> ...
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
ganttchart(甘特图) taskboard(任务看板) jsoneditor(JSON编辑器)
vue中使用vue-print.js实现多页打印
11-21
本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装 下载 print.js https://github.com/zxc19890923/print/blob/master/print.js 在src目录下面创建plugins/pri
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
全栈开发实战技术分享 前端:Vite3+Vue3+TS+Ant-design-vue3 后端:SpringBoot+MybatisPlus+Mysql
vue实现打印功能的两种方法
10-18
主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询...
使用vue 搭配 vue-easy-print 实现打印功能
wangkangyang的博客
11-25 758
3 以上两步就可以直接打印了 但是项目需要进行分页。2. 在需要使用的页面引用。
vue3+ts+vite vue-draggable-next 按钮在区域内任意移动
07-15
在 Vue 3 + TypeScript + Vite 中使用 vue-draggable-next 插件实现按钮在区域内任意移动的功能，你可以按照以下步骤进行操作： 1. 确保你已经安装了 Vue 3、TypeScript 和 Vite，并且已经创建了一个 Vue 3 + TypeScript + Vite 的项目。 2. 在项目根目录下，通过命令行安装 vue-draggable-next： ```bash npm install vue-draggable-next ``` 3. 在你的 Vue 组件中，首先导入所需的库和类型： ```typescript import { defineComponent, ref } from 'vue'; import { draggable } from 'vue-draggable-next'; ``` 4. 创建一个包含按钮的区域容器，并在容器内部使用 `draggable` 组件来包裹按钮。将 `v-model` 指令绑定到按钮的位置属性。 ```typescript export default defineComponent({ components: { draggable }, setup() { const buttonPosition = ref({ x: 0, y: 0 }); return { buttonPosition }; } }); ``` 5. 在模板中使用 `draggable` 组件和按钮。 ```html <template> <div class="container"> <draggable v-model="buttonPosition" :bounds="containerBounds"> <button class="button">移动按钮</button> </draggable> </div> </template> ``` 6. 添加样式，确保容器具有适当的宽度、高度和边界。 ```html <style> .container { position: relative; width: 500px; height: 500px; border: 1px solid #ccc; } .button { position: absolute; left: 0; top: 0; } </style> ``` 通过以上步骤，你就可以在 Vue 3 + TypeScript + Vite 中使用 vue-draggable-next 插件来实现按钮在区域内任意移动的功能。这样，按钮的位置将随着拖动而改变，并受到容器边界的限制。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值