解决Chrome打印对话框中没有布局设置横向问题

最新推荐文章于 2023-01-07 15:18:40 发布
最新推荐文章于 2023-01-07 15:18:40 发布
阅读量1w 收藏 1
点赞数 5
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lpwmm/article/details/107330607
版权
本文解决了使用Chrome浏览器打印基于Bootstrap4的B/S程序时，打印对话框中找不到页面方向设置的问题。通过调整CSS中@page属性，成功恢复打印对话框的布局选项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天遇到一个很奇怪的问题,用Chrome打印自己写的B/S程序发现打印对话框中居然找不到设置页面方向的选项:
在这里插入图片描述
还是在万能的stack overflow上找到了原因:
https://stackoverflow.com/questions/36322109/chrome-printing-website-missing-layout-options

这个web页面是用bootstrap4做的,css样式中默认定义了@page属性导致Chrome打印对话框中隐藏了布局的选项,自己再写个css把bootstrap的属性覆盖一下:

@page{
   size: auto;
}

我是单独写到一个css文件中了,记得引用顺序放到bootstrap.css后面

再刷新页面打印:
在这里插入图片描述

js 打印预览_JavaScript设置默认横向打印，兼容IE浏览器，谷歌浏览器
weixin_39902472的博客
12-03 2975
通常来说我们需要使用打印功能一般都是直接使用window.print()，因为此方法兼容目前所有浏览器，但如果需要设置打印的一些参数的话，其实各种浏览器之间都有种区别，造成不兼容。这里说一下关于设置默认横向打印的一些写法，亲测有效。首先先说谷歌浏览器吧，它设置默认横向是比较简单的，可以通过设置css或js的方法，如：//一般语言的css写法： js写法,只需要将下面代码调用放在window.pri...
chrome 打印布局_Chrome打印预览中缺少布局选项，如何调用出来？
weixin_39693662的博客
12-20 3413
全网搜索了一遍，有一个解决办法说是需要写入这段CSS才能显示出来这个按钮``@page {size: auto;}* * *但是我在添加后再次调用打印也还是没有出现，有的页面未在里面使用此段CSS样式也会有布局按钮的选项显示出来。请问如何才能保持布局按钮在每次的打印预览中出来呢？以下我调用打印的代码// 调用打印print(){this.printNow = true;this.$nextTick...
谷歌浏览器调用打印无预览且默认全屏，只打开一个应用
絮落锦乡的博客
09-27 3725
一、问题描述 在终端的浏览器上，只想打开跟浏览器有关的东西，屏蔽F12和ESC 二、解决办法 1、找到谷歌浏览器的快捷方式，右键属性，在目标后面加上命令，切记，谷歌原有的目标路径用双引号引起。 --kiosk --kiosk-printing 自动全屏，静默打印（可是还会弹出，一闪而过） --app=http://localhost:8080 只打开指定的网址， 两者可以配合使用。 ...
解决在Chrome浏览器上打印Web页面时无法选择布局（横向，纵向）
jeffmatt的博客
09-10 9609
问题描述： 在Chrome浏览器上打印Web页面时无法选择布局（横向，纵向） 解决方案： 在style文件中加入@page的size设置 @page { size: auto;//打印可以选择布局：横向，纵向 } 修改后就可以选择了： ...
chrome 打印布局_html – CSS打印布局 – 单页打印
weixin_42510271的博客
01-12 500
我被卡住了,SO档案没有帮助我.也许我在错误的地方看.这是一个简短的故事：>我有一个看法,我需要打印在一个完整的页面.我不能有第二页,我需要它在页面上尽可能大.>解决方案必须具有合理的跨浏览器兼容性(IE9,Safari,Chrome,FF).>我已经有一个PDF解决方案,但是我也需要一个简单的香草打印解决方案.>该页面是使用Bootstrap构建的,但是我已经覆盖了Pri...
chrome 打印布局_在打印预览模式下使用Chrome的Element Inspector？
weixin_42502382的博客
12-30 534
慕容大雪花Chrome v52 +：打开开发人员工具(Windows：F12或Ctrl+Shift+I，Mac：Cmd+Opt+I)单击自定义并控制DevTools汉堡包菜单按钮，然后选择更多工具>渲染设置(或在较新版本中渲染)。选中“渲染”选项卡上的“模拟打印介质”复选框，然后选择“打印介质类型”。Chrome v48 +(感谢Alex注意到)：打开开发人员工具(CTRLSH...
javascript编写基于chrome浏览器的打印程序,本例用来打印小票.zip
01-08
小票打印机通常需要特殊的设置，如无边距打印和横向布局。开发者可能需要在JavaScript中设置CSS属性，或者通过Chrome的Web Print API（如果支持）来适应这种打印机。 总结来说，这个压缩包提供的资源帮助我们理解了...
chrome浏览器 打印开启布局功能
最新发布
05-26
要在Chrome浏览器中打印并开启布局功能，您可以按照以下步骤操作： 1. 在Chrome浏览器中打开您想要打印的页面。 2. 点击浏览器右上角的菜单按钮（三个竖着的点），选择“打印”选项。 3. 在弹出的打印对话框中，您...
直接使用网页右键中的打印，在A4纸上打印的解决方案
11-12
大部分现代浏览器（如Chrome、Firefox、Edge等）都内置了强大的打印工具，它允许用户自定义打印设置，包括页边距、布局、颜色模式、页码范围等。在网页上，用户可以通过右键点击页面，然后选择“打印”选项来调出...
javaScript设置注册表打印.pdf
10-01
- `SetupLandscape()`函数用于设置页面方向为横向（ Landscape），通过`sendKeys`模拟键盘输入来调出页面设置对话框，并选择横向打印。 3. **页面设置**： - `SetupPage()`函数设置页眉和页脚。它修改注册表中的...
网页横向打印控制技术与源码工具解析
由于具体的博文内容没有给出，我们无法提供博文中的具体内容，但可以从知识点的角度分析如何实现网页内容的横向打印布局。以下是相关的知识点解析： 1. CSS媒体查询（Media Queries）: CSS媒体查询是实现响应式设计...
关于响应式布局，你必须要知道的
前端大全
12-31 6171
（给前端大全加星标，提升前端技能）作者：浪里行舟https://github.com/ljianshu/Blog/issues/38前言响应式Web设计可以让一个网站同时...
浏览器页面设置导致的打印位置偏移
打造核心知识库
09-30 7352
客户的一台针式打印机,出现打印位置偏右,因为是直接通过网页打印,表格是显示在页面上的,没有特别指定打印指令,直接在页面上右键-->打印,但是打印出来后原本居中的表格向右便宜了很多,右半部分打印不出来,按常理的调试打印机设置,设置打印格式,打印纸张等,但是始终偏右,后来在浏览器中看到了打印预览,发现打印预览也是偏右的,在打印预览下面发现有个打印设置,原来问题在此,在页边距设置一项中,左边距已经设置偏
chrome pdf 打印边距问题处理
yw00yw的博客
01-29 4350
需求 将网页打印成pdf,Chrome 可直接将网页保存(打印)为 PDF (无需安装 Adobe )，或者邮件点击打印，但是式样跟网页上显示的有很大不同。 问题是无法选择「纸张大小」，Chrome 在保存为 PDF 文件时，默认纸张大小是 A4。若布局为纵向，显示大小为 210mm×297mm ；若布局为横向，显示大小为 297mm×210mm。 打印方式 地址：打印地址：https://oss.phxg.cn/download/genFileByGotenberg/%E4%BC%98%E5%B
CSDN打印网页去除广告和纠正网页偏移问题
iam_zhanghongliang的博客
04-29 1106
CSDN打印网页去除广告和纠正网页偏移问题 针对网上流行的方法要么不能真正的去除广告，要么是去除广告后使得网页产生偏移，造成打印内容不全。 下边这种方法能够很好的解决上述问题。使用方法是在谷歌或者其他浏览器上，找到控制台，并把下面的代码添加进去按enter键即可完成。简单高效。 (function(){ var e = $('.hide-article-box'); if(e.length...
浏览器打印，Chrome网页打印中的宽度控制
weixin_44081211的博客
01-07 4377
按照1英寸=25.41mm换算，A4纸张可实际显示的像素宽度为794px×1123px，即打印网页的宽度为794px。Return location.reload在这里是刷新的意思，如果没有这句代码打印完后要重新刷新一次网页才能再次打印。实际打印还会有页边距，如果页边距为5mm（窄边距），网页内容最大宽度约750px，若页边距为19mm（默认边距），网页内最大元素分辨率约650px。思路：先用一个div把要打印的页面包裹起来，再将打印的部分转换成HTML格式，然后触发打印事件。其一，锁定网页的宽度。
window.print()进入到打印预览界面后无法进行布局和纸张选择等设置的原因及解决方法
qq_33777040的博客
09-06 8855
做一个网页打印的功能，打印出网页某一部分的内容，使用的window.print()区打印，打印的过程中发现打印预览时没办法进行布局和纸张等的设置。如下图，图一为正常情况可设置相关配置，图二为我遇到的情况： 百思不得其解，在网上搜索相关问题，只看到怎么在样式内设置横向纵向或者是纸张大小的通过设置@page的样式，例如： 横向@page { size: landscape; } 纵向@...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

DexterLien

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

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

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

打赏作者

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

抵扣说明：

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

余额充值