HTML2PDF/index.html at main · xland/HTML2PDF · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
    html,body{
        margin:0px;
        padding:0px;
    }
</style>
</head>
<body>
    <div style="margin:0px;padding:0px;height:22px;overflow:hidden;word-break:break-all;">测试页面边距及裁剪区域 overflow:hidden  ABCDEFGHIJKLMNOPQRSTUVWXYZ  abcdefghigklmnopqrstuvwxyz  ABCDEFGHIJKLMNOPQRSTUVWXYZ  abcdefghigklmnopqrstuvwxyz  ABCDEFGHIJKLMNOPQRSTUVWXYZ  abcdefghigklmnopqrstuvwxyz</div>
    <h1>标题1 H1</h1>
    <h2>标题2 H2</h2>
    <h3>标题3 H3</h3>
    <h4>标题4 H4</h4>
    <h5>标题5 H5</h5>
    <h6>标题6 H6</h6>
    <div style="text-align: center; color: red; border: 1px solid #886622;box-sizing:border-box;">居中对齐，红色文本</div>
    <div style="display:flex;margin-top:1px;">
        <div style="flex: 1; color: green;background-color:yellow;">flex box 黄底绿字</div>
        <div style="flex: 1; text-align: right; color: blue; background-color:red; ">flex box 红底蓝字</div>
    </div>
    <ul>
        <li>列表1</li>
        <li>
            列表2
            <ul style="list-style-type:circle;">
                <li>
                    二级列表1
                </li>
                <li>
                    二级列表2
                </li>
            </ul>
        </li>
        <li>
            列表3
            <ul style="list-style-type:square">
                <li>
                    二级列表1
                </li>
                <li>
                    二级列表2
                </li>
            </ul>
        </li>
        <li>
            列表4
            <ul style="list-style-type:decimal">
                <li>
                    二级列表1
                </li>
                <li>
                    二级列表2
                </li>
            </ul>
        </li>
        <li>
            列表5
        </li>
        <li>列表6</li>
    </ul>
    <div style="line-height:28px;">上标：x<sup>3</sup></div>
    <div style="line-height:28px;">下标：H<sub>2</sub>O</div>
    <div style="text-align:center;">
        <img src="img.png" />
    </div>
    <div>
        <p style="background: #ffd800; white-space: pre-line; line-height: 28px; font-size: 12px; text-align: center; border:1px solid green">
            <span style="color:red">测试带背景颜色的文本段落</span>
            余烬

            当漫天的红霞送走夕阳，
            所有的光，一瞬间，都凝在那颗泪珠上，
            清脆的，是梦碎的声响，


            卑微的、渺小的、娇弱的、颤抖着，
            爬过脸上深深的年轮，
            滚落在，她跌跌撞撞的一生中。


            所有的色彩，都归于青灰，
            所有的叹息，都凝在喉头。
            沉默是归去的号角，
            余音散成一片苍茫。


            鸟鸣声携着晚霞的余烬，轻抚她的脸，
            呜咽声拥着洁白的沙滩，亲吻她的脚，
            当她收紧衣领，
            被无边的孤独与料峭的风紧紧拥抱时，
            只有这片海，
            还悲伤的守在她的身旁。
        </p>
    </div>
    <div style="text-align:center;">
        <img src="img2.jpeg" />
    </div>
</body>
</html>