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

最新推荐文章于 2023-02-15 17:04:57 发布
最新推荐文章于 2023-02-15 17:04:57 发布
阅读量5.6k 收藏 3
点赞数
分类专栏： 资源整理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42692386/article/details/117254579
版权

本文方法来源于stackoverflow：
https://stackoverflow.com/questions/36322109/chrome-printing-website-missing-layout-options

今天遇到一个很奇怪的问题,用Chrome打印时发现打印对话框中居然找不到设置页面方向的选项:
在这里插入图片描述

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

@page{
   size: auto;
}

具体在chrome中的步骤为：按F12快速打开调试窗口，ctrl+F打开查找窗口，然后输入@page找到html代码 中的@page属性改为上述的代码就可以了
在这里插入图片描述

↓↓↓欢迎关注我的公众号，在这里有数据相关技术经验的优质原创文章↓↓↓
在这里插入图片描述

Smilecoc
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
chrome 打印布局_Chrome打印预览中缺少布局选项，如何调用出来？
weixin_39693662的博客
12-20 2747
全网搜索了一遍，有一个解决办法说是需要写入这段CSS才能显示出来这个按钮``@page {size: auto;}* * *但是我在添加后再次调用打印也还是没有出现，有的页面未在里面使用此段CSS样式也会有布局按钮的选项显示出来。请问如何才能保持布局按钮在每次的打印预览中出来呢？以下我调用打印的代码// 调用打印print(){this.printNow = true;this.$nextTick...
解决在Chrome浏览器上打印Web页面时无法选择布局（横向，纵向）
jeffmatt的博客
09-10 7736
问题描述： 在Chrome浏览器上打印Web页面时无法选择布局（横向，纵向） 解决方案： 在style文件中加入@page的size设置 @page { size: auto;//打印可以选择布局：横向，纵向 } 修改后就可以选择了： ...
window.print()进入到打印预览界面后无法进行布局和纸张选择等设置的原因及解决方法
qq_33777040的博客
09-06 8184
做一个网页打印的功能，打印出网页某一部分的内容，使用的window.print()区打印，打印的过程中发现打印预览时没办法进行布局和纸张等的设置。如下图，图一为正常情况可设置相关配置，图二为我遇到的情况： 百思不得其解，在网上搜索相关问题，只看到怎么在样式内设置横向纵向或者是纸张大小的通过设置@page的样式，例如： 横向@page { size: landscape; } 纵向@...
chrome 打印布局_html – CSS打印布局 – 单页打印
weixin_42510271的博客
01-12 421
我被卡住了,SO档案没有帮助我.也许我在错误的地方看.这是一个简短的故事：>我有一个看法,我需要打印在一个完整的页面.我不能有第二页,我需要它在页面上尽可能大.>解决方案必须具有合理的跨浏览器兼容性(IE9,Safari,Chrome,FF).>我已经有一个PDF解决方案,但是我也需要一个简单的香草打印解决方案.>该页面是使用Bootstrap构建的,但是我已经覆盖了Pri...
关于响应式布局，你必须要知道的
前端大全
12-31 6093
（给前端大全加星标，提升前端技能）作者：浪里行舟https://github.com/ljianshu/Blog/issues/38前言响应式Web设计可以让一个网站同时...
【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印
weixin_50450473的博客
02-15 4841
学号：${subjectItem.BaseInfo.ExamNo}【${subjectItem.BaseInfo.Subject}】
Chrome中模态对话框showModalDialog返回值问题的解决方法
09-05
本文将深入探讨Chrome中`showModalDialog`返回值的问题及其解决方案。 首先，`showModalDialog`的基本用法如下： ```javascript var returnValue = window.showModalDialog(url, window, features); ``` 这里，`...
selenium打印对话框操作函数
07-04
通过此函数识别打印对话框“打印”按钮的位置，再通过 pyautogui.click(x,y)模拟点击即可操作打印对话框
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
09-01
上述解决方案通过利用`window.opener`属性，能够有效地解决Chrome中`showModalDialog`的模态对话框和返回值问题。然而，随着浏览器的更新和Web标准的发展，开发者也应该考虑采用更现代的方法，例如使用`<dialog>`...
vc对话框程序嵌入chrome浏览器
01-23
mfc对话框程序中嵌入chrome浏览器，包含完整h、lib、dll。开始下载的最新版开发包CEF 3.3578.1864.gfa073f3，发现程序运行10几秒后，总是会弹出新窗口。后改用稳定版开发包cef3.2623.1401.gb90a3be，该问题得到解决...
chrome浏览器实现打印预览打印功能.zip
01-06
这个API会触发浏览器的默认打印对话框，允许用户选择打印机、设置页面选项并进行打印。但是，如果仅仅使用`window.print()`，可能无法满足对打印内容的自定义需求，例如仅打印网页中的特定部分，或者实现分页效果。 ...
谷歌浏览器实现直接打印效果
honghuangbu0446的博客
06-06 2万+
在做项目的时候遇到这样一个需求，客户不想弹出打印预览界面，想在页面上加个按钮，点击能直接从打印机打印出来单据。这个功能在IE浏览器比较容易实现，用WebBrowser.ExecWB(6,6)就可以实现，谷歌却不支持这个，又不想弄什么插件，于是在网上找到了这么个方法，做个记录。1. 创建一个谷歌浏览器的快捷方式2.  右键快捷方式，点击【属性】，点击【起始位置】，在【目标】尾部位置添加“ --kio...
chrome 打印布局_Chrome打印网页中的宽度控制
weixin_39533280的博客
12-20 1143
最近碰到这个问题，我需要将网页打印成PDF文件。Chrome可直接将网页保存(打印)为PDF(无需安装Adobe)，但式样跟网页上显示的截然不同。我测试了一下用法，了解了其中的一些原理和解决方法，总结如下。Chrome保存为PDF的界面上只有很少几个选项：这几个选项都浅显易懂。但需要注意的是，这里并没有让选「纸张大小」。Chrome在保存为PDF文件时，默认纸张大小是A4。若布局为纵向，显示大小为...
Windows 10文件夹中的一些高级搜索技巧
热门推荐
Smilecoc的博客
09-03 2万+
Windows 10文件夹中的高级搜索技巧
Google Chrome 在打印对话框中设置“无头模式”即可实现静默打印
最新发布
05-27
是的，您说得没错。在 Google Chrome 中，您可以使用“无头模式”来实现静默打印。无头模式是指浏览器在没有UI界面的情况下运行，可以通过命令行或编程方式控制浏览器进行各种操作，包括打印。 以下是一个使用无头模式在 Google Chrome 中进行静默打印的示例代码： ```javascript const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); // 打印设置 const printOptions = { 'landscape': false, 'displayHeaderFooter': false, 'printBackground': true, 'scale': 1, 'paperWidth': 8.27, 'paperHeight': 11.69, 'marginTop': 0, 'marginBottom': 0, 'marginLeft': 0, 'marginRight': 0, 'pageRanges': '', 'ignoreInvalidPageRanges': false, 'preferCSSPageSize': false, 'pdfPath': 'output.pdf' }; // 执行静默打印 await page.goto('http://localhost:8080/print.html'); await page.emulateMedia('screen'); await page.pdf(printOptions); await browser.close(); })(); ``` 在这个示例中，我们使用了一个名为“puppeteer”的Node.js库，它可以模拟用户操作来控制Chrome浏览器。我们首先启动一个浏览器实例，然后打开一个网页并设置打印选项，最后调用“page.pdf()”方法进行静默打印。请注意，这个示例假定您已经正确安装了puppeteer库，并且打印选项已经被替换为实际选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值