5. 调试并测试打印功能 完成以上步骤后,你可以运行你的Vue 3项目,并点击打印按钮来测试打印功能是否正常工作。如果打印结果不符合预期,你可以检查print-js的配置参数,或者查看浏览器的控制台输出以获取错误信息。 通过以上步骤,你应该能够在Vue 3项目中成功集成并使用print-js库来实现打印功能。
其实之所以会有下篇的内容,是因为这个 Vue3 实战项目的前端用了 Element-Plus 这个 UI 框架,其中包括有表格、分页,在博主的文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台)中就已经开始用这套模板了,今天在此基础上和 Vue3 实战项目的延申上,我们来讲一下关于 el-...
本次项目以文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台)中的项目为模板进行改动和编写。 关于 Print.js 在使用 Print.js 插件之前,我们可以通过下面的链接先了解和认识一下这个 JavaScript 插件。 官方地址:Print.js - Javascript library for HTML elements, PD...
table 的部分,看起来是因为 table 设置了固定宽,或者没有设置宽度导致的,试试看在 @media print 使用width:100% 应该会解决问题。 图表的部分,不是很确定,看起来是 resize 之后没有重新 render 导致的。有可能说高度变高了之类的。具体情况只有你知道,毕竟截图里面能看到的信息就不多。 最好的情况是你在使用 ...
vue3使用vue3-print-nb插件,设置分页【page-break-after:always】属性不生效 vue.js 有用关注2收藏 回复 阅读2.5k 撰写回答 你尚未登录,登录后可以 和开发者交流问题的细节 关注并接收问题和回答的更新提醒 参与内容的编辑和改进,让解决方法与时俱进 注册登录 ...
第一步:安装依赖 yarn add print-js 第二步:创建打印组件:PrintHtmlComp.vue <template> <!-- 默认插槽,传入打印内容 --> <slot></slot> ...
一、vue3 element-plus 使用icon图标组件 目前 element-plus版本是2.0.4 当前版本的icon还没有默认在组件中,需要另外安装才能使用图标。 使用步骤: 1.安装 @element-plus/icons-vue库 2.全局引入icon组件 3.使用icon 之前的使用方式还在支持中,目前需要特殊导入。 4.动态绑定icon/ 菜单动...使用...
vue3+ts横向的一级菜单,在点击左侧菜单的时候,一级菜单的选中效果消失? 1 回答2.1k 阅读 vue3+ts使用websocket,返回的信息添加的数组里面? 1.3k 阅读 vue3+ts实现横向的菜单栏+单独的左侧菜单栏? 2 回答3.2k 阅读 vue3+ts给数组里面添加的时候只能添加一次? 1 回答1.8k 阅读 vue3+ts的tabs也切换的时候,...