文章介绍了如何使用CSS实现浏览器的分页打印功能，包括在元素前后设置分页符（page-break-before和page-break-after），调整打印布局（如横纵向设置），以及通过媒介查询(@mediaprint)定制打印样式。示例代码展示了具体的CSS规则和Vue组件的打印方法。
摘要由CSDN通过智能技术生成
<
div
class
=
"box"
>
<
div
class
=
"first-page"
>
我是第一页
<
/
div
>
<
div
class
=
"title-style"
>
我是第二个分页
<
/
div
>
<
/
div
>
<
/
template
>
<
script
>
export
default
{
data
(
)
{
return
{
created
(
)
{
this
.
print
(
)
;
methods
:
{
print
(
)
{
window
.
print
(
)
;
<
/
script
>
<
style
>
body
{
height
:
auto
;
<
/
style
>
<
style scoped
>
.
box
{
box
-
sizing
:
border
-
box
;
text
-
align
:
center
;
max
-
width
:
1123px
;
@media print
{
@page
{
size
:
landscape
;
margin
:
10px
;
.
first
-
page
{
background
:
#f40
;
color
:
#fff
;
text
-
align
:
center
;
page
-
break
-
after
:
always
;
.
title
-
style
{
font
-
size
:
12px
;
font
-
weight
:
600
;
height
:
50px
;
line
-
height
:
50px
;
<
/
style
>
var pageTableHtml = $("#templateTable").clone();
pageTableHtml.css("padding-right", "10px");
$("#publicResult").append(pageTableHtml);//用append的原因是因为用到了分页，将多个templateTable放到
打印
的div
$('#publicR...
语法：
window
.
pr
int
()
参数：无。
注：调用
pr
int
()方法所引发的行为就像用户单击
浏览器
的
打印
按钮。通常，这会产生一个对话框，让用户可以定制或取消
打印
请求。
eg:
打印
当前窗口的内容。
<script type="text/
javascript
">
function
pr
int
_Win()...
window
.
pr
int
()的使用
整体
打印
隐藏掉不需要的结构
document.getElementsByClassName('xmbz')[0].style.display='none';
document.getElementsByClassName('reason')[0].style.display='none';
document.getElementBy...
在使用
JavaScript
进行
打印
操作时，可以使用 `
window
.
pr
int
()` 方法来触发
浏览器
的
打印
功能。而如果想要局部
打印
某个 HTML 元素，可以通过以下步骤实现：
1. 获取需要
打印
的元素，可以通过 `document.querySelector()` 或 `document.getElementById()` 等方法来获取。
2. 创建一个新的空白窗口，可以使用 `
window
.open()` 方法来创建。
3. 在新窗口中插入需要
打印
的元素。
4. 调用新窗口的 `
window
.
pr
int
()` 方法来触发
打印
功能。
以下是一个简单的示例代码：
```html
<!-- 点击按钮触发
打印
功能 -->
<button onclick="
pr
int
Content()">
Pr
int
Content</button>
<!-- 要
打印
的元素 -->
<div id="
pr
int
ableContent">
<h1>
Pr
int
able Content</h1>
<p>This is the content that will be
pr
int
ed.</p>
<script>
function
pr
int
Content() {
// 获取要
打印
的元素
var content = document.getElementById("
pr
int
ableContent");
// 创建新窗口
var
pr
int
Window
=
window
.open("", "
Pr
int
Window
");
// 在新窗口中插入要
打印
的元素
pr
int
Window
.document.write(content.outerHTML);
// 调用新窗口的
打印
功能
pr
int
Window
.
pr
int
();
</script>
