一种超简易的书法字帖的生成打印工具

原创 已于 2025-11-14 21:33:29 修改 · 1k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

于 2024-02-26 14:13:42 首次发布
博主因孩子学校有写字练习需求，自制了一个写字帖。文中分享了该写字帖的在线预览地址，还给出了html、css、jq代码，以及背景底图。此外提到边框和底图颜色本可做成可配参数，大神可改css实现不同颜色，也可删去页面上部无关内容。

因为孩子在学校现在有练习写字的需求，网上买的还不一定是随堂的，所以就自己创建了一个，仓促了一些，可能存在一些偏差，但终归不太影响使用，现在把拙作贴出来，仅供大神参考

预览地址和直链有A4和A5两个尺寸，可以直接在线打表头、打印哦  ^_^

在线预览

预览地址：点击预览 

直链：直链

一、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易书法快捷打印（第一版）</title>
    <script src="js/jquery.1.8.3.min.js"></script>
    <script src="js/jquery.jqprint-0.3.js"></script>
</head>
<body class="page">
<div class="content">
    <h1>&nbsp;<input class="name" type="text" placeholder="书法练习字帖">&nbsp;</h1>
    <label><input class="copyright" type="text" placeholder="独行者">©版权所有</label><input class="title" type="text" placeholder="请在此输入标题">
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="main">
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
        <div class="cell"><input type="text"></div>
    </div>
    <label class="tips">注意事项：</label>
    <label class="tips">1、当前为简易版本，打印页面时，请勾选打印背景图</label>
    <label class="tips">2、建议使用当前最新版本浏览器打开，请勿使用IE</label>
    <h3 class="print" onclick="doPrint()">打印</h3>
</div>
<style type="text/css">
    * {
        border: 0;
        margin: 0;
        padding: 0;
        font-family: '华文楷体';
        /*font-weight: bold;*/
    }

    @media print {
        body {
            -webkit-print-color-adjust: exact;
        }

        div {
            -webkit-print-color-adjust: exact;
        }
    }

    body, html {
        width: 100%;
        height: 100%;
    }

    .page {

    }

    .content {
        width: 600px;
        height: 800px;
        margin: 0 auto;
        /*background: url("img/bg_atm01.jpg") no-repeat 100% 100%;
        background-size: 100% 100%;
        opacity: 0.1;*/
    }

    .content h1 {
        margin-top: 20px;
        text-align: center;
    }

    .content .name {
        text-align: center;
        font-size: 32px;
    }

    .content .copyright {
        text-align: left;
        font-size: 18px;
        width: 66px;
    }

    .content .title {
        font-family: '华文新魏';
        font-size: 18px;
        float: right;
        color: dimgray;
        text-align: right;
    }

    .content .print {
        text-align: center;
        cursor: pointer;
        background-color: white;
        border: 1px #5e5e5e;
    }

    .content .print:hover {
        background-color: crimson;
    }

    .content .tips {
        display: block;
        color: #5e5e5e;
    }

    .main {
        display: flex;
        flex: 0 0;
        border-right: 1px blue;
    }

    .main div.cell {
        display: flex;
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        background: url("img/miz_bg_blue.png") no-repeat center center;
        background-size: 100% 100%;
        box-shadow: inset 0 0 0 1px blue;
        margin-top: 2px;
    }

    .main div.cell input {
        font-size: 38px;
        width: 100%;
        height: 100%;
        text-align: center;
        background: transparent;

    }
</style>
<script type="text/javascript">
    function doPrint() {
        var objPrint = $(".print"), objPage = $(".page"),objTips=$(".tips");
        objTips.hide();
        objPrint.hide();
        objPage.jqprint();
        objTips.show();
        objPrint.show();
    }

    $(document).ready(function () {
        $('input').off().on('change', function () {
            $(this).attr('value', $(this).val())
        })
    })
</script>
</body>
</html>

二、css代码

<style type="text/css">
    * {
        border: 0;
        margin: 0;
        padding: 0;
        font-family: '华文楷体';
        /*font-weight: bold;*/
    }

    @media print {
        body {
            -webkit-print-color-adjust: exact;
        }

        div {
            -webkit-print-color-adjust: exact;
        }
    }

    body, html {
        width: 100%;
        height: 100%;
    }

    .page {

    }

    .content {
        width: 600px;
        height: 800px;
        margin: 0 auto;
        /*background: url("img/bg_atm01.jpg") no-repeat 100% 100%;
        background-size: 100% 100%;
        opacity: 0.1;*/
    }

    .content h1 {
        margin-top: 20px;
        text-align: center;
    }

    .content .name {
        text-align: center;
        font-size: 32px;
    }

    .content .copyright {
        text-align: left;
        font-size: 18px;
        width: 66px;
    }

    .content .title {
        font-family: '华文新魏';
        font-size: 18px;
        float: right;
        color: dimgray;
        text-align: right;
    }

    .content .print {
        text-align: center;
        cursor: pointer;
        background-color: white;
        border: 1px #5e5e5e;
    }

    .content .print:hover {
        background-color: crimson;
    }

    .content .tips {
        display: block;
        color: #5e5e5e;
    }

    .main {
        display: flex;
        flex: 0 0;
        border-right: 1px blue;
    }

    .main div.cell {
        display: flex;
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        background: url("img/miz_bg_blue.png") no-repeat center center;
        background-size: 100% 100%;
        box-shadow: inset 0 0 0 1px blue;
        margin-top: 2px;
    }

    .main div.cell input {
        font-size: 38px;
        width: 100%;
        height: 100%;
        text-align: center;
        background: transparent;

    }
</style>

三、jq代码

<script type="text/javascript">
    function doPrint() {
        var objPrint = $(".print"), objPage = $(".page"),objTips=$(".tips");
        objTips.hide();
        objPrint.hide();
        objPage.jqprint();
        objTips.show();
        objPrint.show();
    }

    $(document).ready(function () {
        $('input').off().on('change', function () {
            $(this).attr('value', $(this).val())
        })
    })
</script>

四、背景底图

五、其它说明

边框颜色和底图颜色本来是要做成可配参数的，本人太懒，满足使用就放在哪了，大神可以改css实现不同颜色的字帖，也可以把页面上部无关精要的内容删掉。。。

另：在打印时发现内容不居中，可以调整一下浏览器里的 “边距” 属性，自定义一下上下左右边距，使其居中

拙作一篇，请多关照

计算机毕业设计springboot基于微信小程序硬笔书法家校联合系统992xk【附源码】
文哥网络
07-26 465
选题背景： 随着社会的发展和人们审美观念的提高，越来越多的人开始关注传统文化艺术，其中硬笔书法作为中国传统文化的瑰宝之一，备受瞩目。然而，由于现代生活的快节奏和工作压力的增加，很多人无法参加传统的书法培训班或找到合适的老师进行指导。因此，开发一款基于微信小程序的硬笔书法家校联合系统，为广大书法爱好者提供便捷的学习平台，具有重要的现实意义。 选题意义： 首先，该系统能够满足人们对硬笔书法学习的需求。通过微信小程序的便利性，用户可以随时随地进行学习，不再受时间和地点的限制。无论是在家、在办公室还是在旅途中，用
字典练习自动生成器（自动生成各种字帖进行学习）
10-19
为了提高家里孩子自己动手查字典的能力，还有练字、拼音能力，利用易语言开发了这个小软件，自动生成生字excel，方便打印，每天让孩子练一版。 原理很简单，exe调用模板（muban.xls），生成“年月日 时分秒”.xls。具体效果如下图： （1）字和字之间不用分隔符，之间相连即可。 （2）字太多的时候，生成有点慢，会假死，请耐心等待。 （3）打印时候还有稍微调一下格式。
PHP实例开发源码——田字格笔顺字帖在线生成器php源码.zip
11-30
PHP实例开发源码——田字格笔顺字帖在线生成器php源码.zip
书法网站源码
01-29
后台地址：/guanli2010/Login.asp 帐号密码都是admin
【亲测免费】 探索创新学习工具：开源汉字、拼音与数字字帖生成器
最新发布
gitblog_00052的博客
06-13 952
探索创新学习工具：开源汉字、拼音与数字字帖生成器 项目介绍 在教育领域，尤其是儿童早期的学习过程中，字帖一直是一个重要的辅助工具，它有助于提高孩子的书写技巧和记忆力。现在，我们有幸向您推荐一款名为“汉字字帖”的开源项目，这是一个跨平台的应用程序，专为生成自定义的汉字、拼音和数字字帖而设计。无论是家长、教师还是对汉字书法感兴趣的人，都能从这个项目中找到无尽的可能性。 项目技术分析 该项目采用先进的编...
自动生成书法字帖的简易打印工具
资源摘要信息:"一种超简易的书法字帖的生成打印工具" 根据提供的文件信息，我们可以提取以下知识点： 1. 工具目的与应用背景： - 该工具是针对学龄儿童设计的，用于生成书法字帖。 - 孩子在学校有练习写字的需求...
精选资源
22：字帖自动生成(小学生练习写字打印工具).rar
12-27
"22：字帖自动生成(小学生练习写字打印工具).rar"这个压缩包文件显然包含了一个专为小学生设计的字帖生成系统，旨在帮助孩子们规范地学习和练习汉字书写。 字帖自动生成工具的核心功能在于能够根据用户的需求，如...
精选资源
小学生练字神器，在线字帖生成器网站源码
01-13
描述部分简洁明了地重复了标题的信息，强调了这是一个专为小学生设计的练字辅助工具，通过在线字帖生成器的形式，便于用户在网页上直接操作和打印出适合练习的字帖。这对于想要提升孩子书写技巧的家长和教师来说，是...
精选资源
在线生成PHP源码，小学生练字神器字帖生成器
09-03
首先，我们要理解PHP是一种广泛使用的服务器端脚本语言，尤其在网络开发中占据重要地位。这款练字神器的源码就是基于PHP开发的，意味着它能够在服务器上运行，为用户提供动态生成字帖的服务。通过编程实现，可以高效...
田字格笔顺字帖在线生成器php源码
08-14
php源码 田字格笔顺生成，字帖生成器php版源码 ，共收录9574个常用汉字!
HTML汉字笔顺笔划字帖在线生成器网页源码.zip
08-29
田字格字帖生成器，低年级学生练字神器，共收录9574个常用汉字！ 本系统可以在线生成田字格、米字格完全免费。田字格是最精简的练习格，被小学低年级语文课本作为生字词的展示方式。小学时期，特别是低年级阶段，是学习汉字书写的关键时期，使用本系统生成田字格字帖，让低年级小学生逐渐将汉字写规范，养成正确的汉字笔顺书写习惯，给以后的语文学习和汉字书写打下坚实的基础。
CopybookBuilder字帖生成器.rar
08-01
最近为方便家里小朋友练字, 写了个字帖生成器。 主要功能： 支持描红和临摹两种模式 可调整田字格和字体大小 字体需自行安装字体到系统 透明度: 文字透明度 常用汉字: 勾选后仅显示[0x4E00, 0x9fff]范围的unicode字符 附件空行: 每一行后面自动添加空行 描字类型: 描红模式下有效, 支持不描、半描和全描 导出为PDF文件
书法字帖在线生成，可以自行设定任意格字文字
02-23
这是一个简单的在线生成书法字帖的页面，非常简单，当初只是为了方便给孩子练习写字，而且可以随堂
收藏一个字帖生成器，在线生成字帖
ehaoboy的博客
08-16 8914
学习巴士，www.3415.cn 挺好用的，几十个字帖生成功能。
汉字笔顺字帖在线生成器网站源码
www_5438xiazai的博客
04-19 2424
介绍： 田字格笔顺生成，字帖生成器php版源码 ，共收录9574个常用汉字！ 网盘下载地址： http://kekewl.cc/jlpEwT4f6x7 图片：
收藏一个好用的免费在线生成描字帖网站
haiwuya168的博客
08-28 3162
最近发现一个免费并且强大的描字帖在线生成网站，笔顺字帖、汉字字帖、拼音字帖、数字字帖、空格子字都可以免费生成；大小、颜色、字体个性选；字帖内容随心定制，自助打印方便快捷。 网站名称：E族描字帖 网站网址：http://zi.nqez.com ...
【自制开源】实时调参，手写字生成神器！大学生福音，告别繁琐的手写报告。
weixin_62650212的博客
11-27 1032
HandwritingGenerator 是一个使用 PyQt6 制作的手写文本图片生成器。 该工具允许用户自定义多种效果，通过在左边配置效果参数，右边实时预览，并在调整好后输出图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值