vue-easy-print 项目中页面打印实现（去除页眉页脚）

最新推荐文章于 2024-03-21 11:37:35 发布
最新推荐文章于 2024-03-21 11:37:35 发布
阅读量1w 收藏 5
点赞数
文章标签： vue vue-easy-print
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010638673/article/details/99079841
版权

vue-easy-print

调整UI

找了半天，在打印的那个vue文件中添加 style scoped 加入
去掉页眉页脚， 正常 print() 浏览器会带页眉和页脚，包含日期、页码、页面title、当前url，这些信息往往不适合打印出来，所以需要去掉。
所在位置：vue-print\src\components\demo.vue

<style scoped>

@page{
  size: auto A4 landscape;
  margin: 3mm;
}
</style>

案例效果：
git clone https://github.com/huangbosbos/vue-print.git

参考：
https://blog.csdn.net/siwangdexie_copy/article/details/86303435

掘金者说
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
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
vue js 打印 去掉页脚的链接，去掉页眉页脚
心底善良小剥皮de博客
10-12 3365
打印时去掉页脚的链接 @page{ margin-bottom: 1mm; } 打印去掉页眉页脚 @page{ margin-top: 1mm; margin-bottom: 1mm; }
关于前端使用vue调用print 插件-打印机直接在线打印，处理去除：多余网址信息等
m0_63467937的博客
03-21 291
千位符，以及使用在线打印 print 插件
vue 打印功能 调用原生print，带（去掉页眉页脚）分页打印
热门推荐
AmbroseLe
05-14 1万+
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后 在页面引入 import Print from 'vue-print-nb' </section> </template> <script> import Vue from 'vue'; import Print from 'vue...
vue插件(vue-print-nb)实现打印功能
DZQ1223的博客
06-27 1万+
只需要给不自动换行的标签加上 word-wrap:break-word;注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id。2.打印內容不自动换行问题。
Vue使用vue-print-nb打印，并去除页眉页脚，打开打印窗口自动打印
wujf90的博客
08-19 9880
一、这次使用的是vue-print-nb插件完成打印的功能。 借鉴链接：https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html 文档：https://www.npmjs.com/package/vue-print-nb#usage-method 使用方式 安装 npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' Vue.us
js实现打印并去除页眉页脚功能
12-13
用js实现的web打印功能，可通过修改本地的注册表 去除页眉页脚
vue项目中页面打印插件（去除页眉页脚）
单眼皮的小熊
03-22 2483
正常 print() 浏览器会带页眉和页脚，包含日期、页码、页面title、当前url，这些信息往往不适合打印出来，所以需要去掉。 插件 vue-easy-print 样式调整 @page{ size: auto A4 landscape; margin: 3mm; } 同时，打印多页的情况下，在当前内容的盒子上加padding，每个页面情况不一样，padding的值也不固定，需要尝试 .agreeCon { background: #fff;
vue-print设置页眉和页脚_word版式技巧：页眉的几个常用调整操作
weixin_39852121的博客
12-12 2130
Word中有一个很麻烦，但我们又不得不掌握的功能——页眉。公司做的宣传册，在页眉加个Logo，增加点公司形象，却不知道从何下手。添加页眉，但是页眉总是有条讨厌的横线，怎么删都删不掉，等等等等……如果你受上述任何一个问题困扰，那就证明你没有掌握页眉的正确设置方法。所以今天小编给大家学习汇总了几个页眉设置最常见的技巧，希望对你有帮助。1、清除页眉中的横线在Word中，双击页眉处即可进入页眉页脚模式。这...
vue html页面打印功能vue-print-nb
嘿嘿
02-14 2116
vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使用方式 安装 npm install vue-print-..
vue-print-nb:Vue插件，打印！ 好的！
05-12
vue-print-nb 这是用于包装，简单，快速，方便，轻便的指令包装纸。 安装 Vue2版本： npm install vue-print-nb --save import Print from 'vue-print-nb' // Global instruction Vue . use ( Print ) ; //or // ...
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式...
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
所以说，咱们今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy； 一、获取vue-waterfall-easy组件 这里有两种方式： 第一种就是直接从git上复制vue-waterfall-easy组件的完整代码
将vue页面文本导出到word,并设置页眉页脚，分页打印相关讲解--高级版
qq_41802224的博客
07-22 2365
需求： 将以下内容导出到word，并设置页眉页脚，页码以及导出时间，且时间、页码加粗处理；每一个明细各占一页，且不能有空白页出现。 最终效果展示： 代码展示及讲解： <template> <div> <hr /> <div class="s-header"> <img src="../../assets/logo.png
基于Java的消息中间件java操作demo.zip
05-08
消息中间件java操作demo 提供activeMq的 java实现，和两种模式：点对点、发布和订阅 直接clone下来，导入maven项目启动test包下的 Client.java
基于 Python 的波士顿房价数据集
05-08
波士顿房价数据集 波士顿房价数据集 目的：通过分析十三个房屋特征与房价的关系，同时建立模型进行房价预测 波士顿房价指标与房价的关系 CRIM：城镇人均犯罪率——负相关占比 ZN：住宅用地所占比例——无单个特征 INDUS：城镇中非住宅用地所占比例——负相关 CHAS：虚拟变量，用于回归分析——无单个特征 NOX：环保指数——无单个特征 RM：每栋住宅的房间数——正相关 AGE：1940年以前建成的自住单位的比例——无单个特征 DIS：距离5个波士顿的就业中心的加权距离——无单个特征 RAD：距离高速公路的便利指数——无单个特征 TAX：每一万美元的不动产税率——无单个特征 PTRATIO：城镇中教师学生比例——无单个特征 B：城镇中黑人的比例——无单个特征 LSTAT：地区中多少房东属于低收入人群——负相关 MEDV：自主房屋房价中位数（标签数据）——房价中位数
优秀毕业设计 基于STM32单片机的家庭智能安全系统源码+详细文档+全部数据资料.zip
05-08
【资源说明】 优秀毕业设计 基于STM32单片机的家庭智能安全系统源码+详细文档+全部数据资料.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
基于python U2Net 深度学习的证件照生成.zip
最新发布
05-08
基于python U2Net 深度学习的证件照生成.zip
vue-print-nb打印页眉页脚
10-18
可以使用 vue-print-nb 插件来实现打印页眉页脚。具体步骤如下： 1. 安装 vue-print-nb 插件： ``` npm install vue-print-nb --save ``` 2. 在需要打印的组件中引入插件： ```javascript import Print from 'vue-print-nb' export default { components: { Print }, // ... } ``` 3. 在需要打印的组件中添加打印按钮，并绑定打印事件： ```html <template> <div> <!-- 打印按钮 --> <button @click="print">打印</button> <!-- 需要打印的内容 --> <div ref="printContent"> <!-- ... --> </div> </div> </template> ``` ```javascript export default { // ... methods: { // 打印事件 print() { this.$print(this.$refs.printContent) } } } ``` 4. 在需要打印的组件中添加页眉页脚模板： ```html <template> <div> <!-- 打印按钮 --> <button @click="print">打印</button> <!-- 需要打印的内容 --> <div ref="printContent"> <!-- ... --> </div> <!-- 页眉页脚模板 --> <Print :title="title" :printStyle="printStyle"> <template #header> <div style="text-align: center;"> <h1>页眉</h1> </div> </template> <template #footer> <div style="text-align: center;"> <h1>页脚</h1> </div> </template> </Print> </div> </template> ``` ```javascript export default { // ... data() { return { // 页眉 title: '页眉', // 打印样式 printStyle: ` @page { size: A4; margin: 0; } body { margin: 1.6cm; } ` } }, methods: { // 打印事件 print() { this.$print(this.$refs.printContent) } } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

掘金者说

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值