请教在 一页html中,能不能用 css 控制两种打印方向?

软件和网站开发以及相关技术探讨
回复
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

请教在 一页html中,能不能用 css 控制两种打印方向?

#1

帖子 alober » 2018-10-24 12:37

如题。假设现在有一页 index.html 需要打印,分两页,第一页要求是横向,第二页要求是纵向。

代码: 全选

@page {
  size: A4 landscape;
}
两页间已经使用 page-break-before: always; 输出了换页符。
像上面这样加到 style 中,只能全局设置。请教这个能做到部分设置吗?
头像
astolia
论坛版主
帖子: 4696
注册时间: 2008-09-18 13:11
送出感谢: 1 次
接收感谢: 789 次

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#2

帖子 astolia » 2018-10-24 19:57

可以用伪类来限制作用范围 https://developer.mozilla.org/zh-CN/doc ... A%E4%BE%8B

第一页横,后面的页纵

代码: 全选

@page :first {
  size: A4 landscape;
}
@page {
  size: A4 portrait;
}
奇数页横,偶数页纵

代码: 全选

@page :right {
  size: A4 landscape;
}
@page :left {
  size: A4 portrait;
}
这些用户感谢了作者 astolia 于这个帖子:
alober (2018-10-26 20:04)
评价: 3.7%
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#3

帖子 alober » 2018-10-25 10:05

astolia 写了:
2018-10-24 19:57
可以用伪类来限制作用范围 https://developer.mozilla.org/zh-CN/doc ... A%E4%BE%8B

第一页横,后面的页纵

代码: 全选

@page :first {
  size: A4 landscape;
}
@page {
  size: A4 portrait;
}
奇数页横,偶数页纵

代码: 全选

@page :right {
  size: A4 landscape;
}
@page :left {
  size: A4 portrait;
}
谢谢。加入这个 css 后,以 opera 56.0.3051.52 为例,按 Ctrl+P 组合健,打印时有个“布局”的选项,虽然在这里选择了第一页为横向,但在 opera 里还是可以调成纵向。
现在假设不作任何调整,当打印完第一页(默认保持横向)时,对第二页,如果不采取手动调整 opera 的布局为纵向,它仍然不能识别出纵向,而是保持了第一页的横向。
如果手动调整了第二页为纵向,它还会记忆这个调整,下次刷新时,再按 Ctrl+P,第一页也不会变为 css 中设置的横向,而是记忆了上次选择的纵向。
头像
astolia
论坛版主
帖子: 4696
注册时间: 2008-09-18 13:11
送出感谢: 1 次
接收感谢: 789 次

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#4

帖子 astolia » 2018-10-26 9:51

你这个是opera的问题。chromium 70上不需要你手动设置什么
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#5

帖子 alober » 2018-10-26 12:12

astolia 写了:
2018-10-26 9:51
你这个是opera的问题。chromium 70上不需要你手动设置什么
谢谢,我在客户机的 windows 7-64bit 上安装了以下浏览器来测试:
Chrome 70.0.3538.77
Opera 56.0.3051.52
Firefox 63.0 (64 位)

结果都是需要手工调整。

以下是我做测试的 html,每次按下 Ctrl+P,都是第一页和第二页方向相同。请问我是在哪里做错了呢?

代码: 全选

<!DOCTYPE html>
<html>
<head>
<style>
@page:first {
	A4 landscape;
	margin: 1cm 0;
}
@page {
	A4 portrait;
	margin: 1cm 0;
}
.page_1 {
	width: 282mm;
	height: 200mm;
	border: 1px solid black;
}
.page_2 {
	width: 200mm;
	height: 282mm;
	border: 1px solid black;
}
</style>
</head>
<body>
<div class="page_1">
第一页
</div>

<div class="page-landscape" style="page-break-before: always;">

<div class="page_2">
第二页
</div>
</body>
</html>
头像
astolia
论坛版主
帖子: 4696
注册时间: 2008-09-18 13:11
送出感谢: 1 次
接收感谢: 789 次

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#6

帖子 astolia » 2018-10-26 17:14

你css写错了啊
@page :first {
size: A4 landscape;
}
@page {
size: A4 portrait;
}
另外firefox不支持size属性,所以这个在firefox上没用
这些用户感谢了作者 astolia 于这个帖子:
alober (2018-10-26 20:07)
评价: 3.7%
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#7

帖子 alober » 2018-10-26 20:04

astolia 写了:
2018-10-26 17:14
你css写错了啊
@page :first {
size: A4 landscape;
}
@page {
size: A4 portrait;
}
另外firefox不支持size属性,所以这个在firefox上没用
谢谢。唉,错在这个问题上。

再问一下,如果有多页,能不规则地指定方向吗?比如 1,2,3 页,想指定 1,2 页横向,3页纵向。又或者 1,2,3,4,5 页,想指定 3 页横向,其它页纵向。这个在伪类里能做到吗?应该是用nth-child这个吧,一会试试看。
头像
astolia
论坛版主
帖子: 4696
注册时间: 2008-09-18 13:11
送出感谢: 1 次
接收感谢: 789 次

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#8

帖子 astolia » 2018-10-26 23:43

我在二楼专门把文档链接都给你了,看起来你也没去看一眼。文档上写清楚了,@page能用的伪类就只有6个,其中2个还是实验性的不推荐用
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#9

帖子 alober » 2018-10-27 7:58

astolia 写了:
2018-10-26 23:43
我在二楼专门把文档链接都给你了,看起来你也没去看一眼。文档上写清楚了,@page能用的伪类就只有6个,其中2个还是实验性的不推荐用
谢谢。其实去看了那个文档,只是看的时候说是示例,以为只是举了其中几个例子,没有举全。后来尝试了其它伪类,确实是用不了。
之后在网上还找到一个方案,是用的

代码: 全选

@page section {
    size: A4 landscape;
}
@page table {
    size: A4 portrait;
}
然后在正文中用 section 和 table 分别决定纵横。但也没起作用。
头像
astolia
论坛版主
帖子: 4696
注册时间: 2008-09-18 13:11
送出感谢: 1 次
接收感谢: 789 次

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#10

帖子 astolia » 2018-10-27 10:40

文档中的中文翻译有点问题。上面的正式语法中就只列了4种正式伪类
这种写法显然是错的。本来该是@page的size属性,你这样写就成了section/table的size属性
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#11

帖子 alober » 2018-10-27 12:53

astolia 写了:
2018-10-27 10:40
文档中的中文翻译有点问题。上面的正式语法中就只列了4种正式伪类
这种写法显然是错的。本来该是@page的size属性,你这样写就成了section/table的size属性
哦,我记错了,应该是下面这个 css

代码: 全选

@page landscape {
    size: A4 landscape;
}
@page portrait {
    size: A4 portrait;
}
section {
	/**/
	page: landscape;
}
table {
	/**/
	page: portrait;
}
然后在正文中用 section 和 table。不过这个没起作用。
头像
astolia
论坛版主
帖子: 4696
注册时间: 2008-09-18 13:11
送出感谢: 1 次
接收感谢: 789 次

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#12

帖子 astolia » 2018-10-27 18:57

这种命名页的用法只存在于w3c标准草案里,没有哪家浏览器是支持了的
这些用户感谢了作者 astolia 于这个帖子:
alober (2018-10-27 22:01)
评价: 3.7%
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

Re: 请教在 一页html中,能不能用 css 控制两种打印方向?

#13

帖子 alober » 2018-10-27 22:01

astolia 写了:
2018-10-27 18:57
这种命名页的用法只存在于w3c标准草案里,没有哪家浏览器是支持了的
谢谢。看来目前是不能实现不规则的页面布局了,好在目前只有两页要打印,之前的方案已经完全够用了。
回复

回到 “软件/网站开发”