谷歌浏览器window.print()使用js设置页边距

qw_zhku 2017-09-25 12:44:16
如题：必须使用谷歌浏览器（客户要求），利用window.print()打印时如何用js设置页边距?（注意：客户无法手动选择页边距，浏览器被封装成了简易的客户端，点击打印的时候相当于按Ctrl+Shift+P弹出了系统对话框，系统对话框中只能选择纸张什么的，没有边距可以选择）。不能选择和设置边距导致我的纸张不能打到最左边，左边和上边始终有一个系统边距空白，不符合系统需求。
...全文
2369 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
文生_CN 2019-09-21
  • 打赏
  • 举报
 回复
使用window.print打印frame框架
study201612 2017-12-13
  • 打赏
  • 举报
 回复
您好，请问你现在解决了，我也遇到了这样的问题，需要打印二维码，让打印出来的二维码居中处理
qw_zhku 2017-09-26
  • 打赏
  • 举报
 回复
搞了两天连个回复的人都没，这年头还是得靠自己解决，还不能结贴，c
WEB页面性能测试：页面加载过程+页面性能指标+页面性能工具实战课程
通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习，可以学到如下内容：①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等）；②WEB网站页面性能测试策略；③WEB网站页面加载过程（前端基础语言：HTML+CSS+JavaScript，DOM、CSSOM、渲染树、布局、绘制）；④WEB网站页面性能测试工具的实际操作和功能介绍（开发者工具：控制台、网络、性能、Lighthouse、FPS渲染统计等）；⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容：第一章：课程简介1、课程介绍2、课程大纲第二章：页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章：页面加载过程1、HTML概念，HTML5实例，HTML5文档2、CSS概念，CSS实例，CSS文档3、JavaScript概念，JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程，HTML渲染树第四章：页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章：页面性能测试工具-控制台：window.performance1、控制台：window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章：页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章：页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章：页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章：页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章：页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章：网速调研1、全国网速的调研和本机网速测试第十二章：页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​
window.print()打印时根据页面高度设置居中显示、设置打印布局（纵向、横向）
1.页面定义打印div按钮： <!-- 打印机按钮开始 --> <div style="position: absolute;top:100;right:0px;z-index: 9999;background-color:#EDEDED"> ...
window.print()只显示一页；page-break-after无法强制分页
最近，有一个开发任务，就是需要调用浏览器的自带的打印功能，打印页面中某一部分的表单内容（就是页面时什么样就什么样，把按钮…就是因为body缺少了这个，浪费了很多时间去排查（本猿对前端的深入不是很强）后面，在网上搜索了很多解决方法，也尝试了很多，都不管用。后面，我也会放置我使用的整个方案的代码到链接中：链接。这说明导出到浏览器自带打印界面时，没有自动分页。通过在表单页增加打印按钮，调用。单纯的调用会出现一个现象就是，有了这个配置之后，后面的。
网页打印javascript:window.print()
 在做B/S项目开发时。难免会遇到网页打印问题！本人在网络上搜集 的一些资料拱 大家使用！yzitw.com №网络剑客→ 搜集可以用css控制，看孟老大写的。@media print.a {display:block}.b {display:hidden}好像是这样。把你不想打印的部分class设为b首先在网页中添加：             VIEWAS
window.print react+antd 分页打印 去掉页眉页脚
框架：react+antd 一、代码： window.print(); 二、分页打印+谷歌打印的css样式 我这里是表格的打印，表格数据很多，打印时需要分页。浏览器打印工具自动分页，Table的表头会自动显示在第2页上，但是顶着第2页的顶部，没有上边距，且上一页页尾也没有下边距，还有表格行拆开的样式。 为了解决这些样式丑的问题，决定手动分页。未打印状态显示完整的1个表格，打印状态时，将1个表格拆...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章