文本两端对齐及将表单打印在A4上

本文探讨了在前端设计中如何解决A4纸打印布局的问题,包括使用特殊字体、实现内容自适应A4纸大小及多页打印时保持格式一致性的方法。

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

/**工作中遇到一个问题就是 单位看到一些有关公司得相关得事项,想要讲内容打印出来,所以前端设计了一个样式,

但是还是有很多不足的地方,暂时没有想到更好的方法,如:

一些字体要求是特殊字体,没有办法为了几个字而去安装实现,所以全部采用了图片; 

 由于前端没法计算A4纸的大小,所以一点一点摸索通过屏幕px实现了当内容不多,还是打印一张完整A4上,这也导致了当内容使其超过A4纸到了第二张纸上使无法头部加上边框线;

*****想要看一下在A4纸上得效果 ,可以再控制台输入window.print()  查看效果*******

如果有大神看到有更好的方法,可以告知,谢谢

*/

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0;margin: 0;}
        table{width: 100%;height: 100%;text-align: center; border: 1px solid black;}
        tr{width: 100%;height: 30px;}
        td{
            width: 25%;
            padding: 10px;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            text-align: justify;  /**文本两端对齐*/
        }
        span{   /*要使文本两端对齐生效,必须添加这个**/
            display: inline-block;
            width: 100%;
        }
        .center{
            text-align: center;
        }
        .borderNone{
            border-right: none;
        }
        .borderBottom{
            border-bottom: none;
        }
        tr td.widt{
            width: 25%;
        }
    </style>
</head>
<body>
<p style="width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 18px;">会议记录</p>
<table cellpadding="0" cellspacing="0">
    <tr>
        <!--注:内容里面不能出现空字符,不然也会算在内-->
        <td>应到人数<span></span></td>
        <td class="center">152人 内容里面不能出现空字符,不然也会算在内内容里面不能出现空字符,不然也会算在内内容里面不能出现空字符,不然也会算在内内容里面不能出现空字符,不然也会算在内内容里面不能出现空字符,不然也会算在内</td>
        <td>实到人数<span></span></td>
        <td class="center borderNone">120人</td>
    </tr>
    <tr>
        <td>主持人<span></span></td>
        <td class="center"> </td>
        <td>记录人<span></span></td>
        <td class="center borderNone"> </td>
    </tr>
    <tr>
        <td colspan="10" class="center borderNone">主   要   内   容</td>
    </tr>
    <tr>
        <td colspan="10" style="height: 1000px;position: relative" class="center borderNone">
            <div style="width:98%;position: absolute;top: 20px;left: 10px">
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。
                在海岸边,退潮时你可徒步走到一些岛屿近处,在潮间带里看见诸如海星、海胆、海带等海洋生物,体验甜蜜的幸福感。或是在天气好时,肩并肩坐在海滩上等待日落晚霞,浪漫满溢。

            </div>

        </td>
    </tr>
    <tr>
        <td colspan="1">参加党员列表<span></span></td>
        <td colspan="9"  class="center borderNone"> </td>
    </tr>
    <tr>
        <td colspan="1" class="borderBottom">缺席党员列表<span></span></td>
        <td  colspan="9" class="center borderNone borderBottom"> </td>
    </tr>
</table>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值