js+css实现带拼音笔画的汉字字帖生成器代码-html代码-BFW代码库

js+css实现带拼音笔画的汉字字帖生成器代码

代码语言：html

所属分类：其他

代码描述：js+css实现带拼音笔画的汉字字帖生成器代码，可导出pdf文档，直接打印、操作方格大小和页边距设置和字体设置。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级字帖生成器 - 笔顺分解版</title>
    <!-- 引入 pinyin-pro 库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pinyin-pro.js"></script>
    <!-- 引入 hanzi-writer 库 (用于获取笔顺数据) -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hanzi-writer.min.js"></script>
    <!-- 引入 html2pdf.js 库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/html2pdf.bundle.min.js"></script>
    <style>
        :root {
            --grid-size: 25mm;
            --page-margin: 15mm;
            --font-family: 'KaiTi', 'STKaiti', serif;
            --main-char-color: #000000;
            --trace-char-color: #d8d8d8;
            --grid-line-color: #ffcccc;
            --pinyin-line-color: #fbe0e0;
            --stroke-main-color: #000000;
            --stroke-highlight-color: #e63946;
        }

        /* --- 基本布局 --- */
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; display: flex; height: 100vh; background-color: #f4f7f9; overflow: hidden; }
        .app-container { display: flex; width: 100%; height: 100%; }
        #preview-area { flex-grow: 1; padding: 20px; overflow: auto; display: flex; justify-content: center; }
        #a4-sheet { width: 210mm; min-height: 297mm; padding: var(--page-margin); background: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; }
        #controls-panel { width: 300px; flex-shrink: 0; background: #ffffff; border-left: 1px solid #e0e0e0; padding: 20px; overflow-y: auto; }

        /* --- 控制面板 --- */
        .control-header { display: flex; margin-bottom: 20px; }
        .control-header button { flex: 1; padding: 10px; border: 1px solid #ccc; background: #fdfdfd; cursor: pointer; font-size: 14px; }
        .control-header button.primary { background: #007bff; color: white; border-color: #007bff; }
        .control-header button:first-child { border-radius: 4px 0 0 4px; }
        .control-header button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
        .control-group { margin-bottom: 18px; }
        .control-group textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; resize: vertical; box-sizing: border-box;}
        .........完整代码请登录后点击上方下载按钮下载查看