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

vue 项目中页面打印实现

参考文章：
13 Paged media

项目描述：
背景：框架vue、组件 element-ui，已有一个在用的后台管理系统
需求：现需在列表页面添加按钮-----打印协议，并且在点击按钮以后，进入打印页面，确认无误后在打印页面点击打印直接调电脑连接的打印机。

主要代码：

window.print()

实现思路：
1、项目本身具有layout嵌套，window.print() 会打印整个页面，layout部分也会被打印，要避免这种情况，只能新建.vue文件，并且，尤其注意，路由需要在最上层，不要嵌套;

2、待打印页面一般会附带一个打印按钮，注意在点击打印按钮以后，先隐藏此按钮，再调 window.print();

3、去掉页眉页脚，正常 print() 浏览器会带页眉和页脚，包含日期、页码、页面title、当前url，这些信息往往不适合打印出来，所以需要去掉。去掉方式参见文章13 Paged media：

    @page{size: auto A4 landscape;margin: 3mm;}

同时，打印多页的情况下，在当前内容的盒子上加padding，每个页面情况不一样，padding的值也不固定，需要尝试

.agreeCon {background: #fff;box-sizing: border-box;padding: 2rem 3rem 4rem;
}

vue 项目中页面打印实现（去除页眉页脚）相关推荐

解决：vue项目中页面顶部和左边出现空白
vue项目中页面顶部和左边出现空白本次问题是调试login.vue页面时出现的.发现页面顶部和左边出现不应该出现的空白后,打开f12,查看.发现左边的空白是body的margin.于是在本页面css ...
vue项目中批量打印二维码
前提:项目中要打印的二维码为后台返回,批量选择后,点击打印,先打开二维码预览界面,再执行打印. 以下代码中 codePicList为选中的二维码数组.重点css:page-break-after:al ...
vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置
背景描述: 最近在做移动端前端项目中,需要实现以下场景: 1.在页面查询列表,进入详情页时,返回需要页面返回到上次浏览的位置 2.由于查询列表获取的数据可能会短时间改变,如果前端长时间缓存数据,并不符 ...
vue项目 - 实现页面打印成PDF格式
现在要实现功能为:将写好的页面.打印成PDF格式代码实现 1.首先安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片 ...
vue项目中页面生成pdf并下载，vue 中页面转PDF
方法一第一步.安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf -- ...
vue项目中页面添加水印
很多时候在后台管理系统中,有在页面中添加员工姓名的水印的需求,保证系统的安全性.可以定一个如下的方法,提供两种方案供选择,第二种更简洁,也是我目前使用的,很稳定. 第一种方案: watermark(s ...
vue项目中页面响应式布局设计方案
针对全屏页面开发,兼容 19201080,以及 1366768 js设置原型属性$screen: 获取当前是什么屏幕 isS: 1366定义的最小屏幕 isM: 1366-1600的中间屏幕 isB: ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
vue项目中如何利用lodop控件实现多页打印
针对windows环境下的vue项目中如何利用lodop控件实现打印的功能,不支持mac环境下载安装首先去lodop官网下载中心下载相关的包,完成安装重点关注前四个文件,安装第一个文件,在第二个 ...

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

vue 项目中页面打印实现

vue 项目中页面打印实现（去除页眉页脚）相关推荐

最新文章

热门文章