纯html无法实现名片实时生成，必须用javascript监听oninput事件并动态更新dom；css仅控制样式，不处理数据绑定；核心是建立输入与预览间的低延迟响应通道。
用纯 HTML + CSS + JavaScript 实现可交互名片生成器
不需要后端、不依赖框架，一个 index.html 文件就能跑起来——关键在表单实时绑定 + DOM 动态渲染，而不是堆砌 div 或靠截图工具“假装”生成。
为什么不能只用 HTML？必须加 JavaScript 才能“生成”
HTML 本身是静态结构，<input> 填了内容不会自动出现在名片区域；CSS 只负责样式，不处理数据流转。所谓“生成”，本质是监听输入、读取值、插入到目标容器中。
-
oninput比onchange更合适：用户每敲一个字就更新预览，避免失焦才触发 - 避免直接拼接 HTML 字符串（易 XSS），优先用
textContent或innerText渲染文本内容 - 名片区域建议用
<div id="business-card"> 作为唯一渲染目标，不要重复 clone 模板 <h3>常见坑：中文乱码、字体不显示、导出为图片失败</h3> <p>浏览器里看着正常，一截图或转 PDF 就丢字——根本不是编码问题，而是字体未加载完成或未声明 fallback。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>确保 CSS 中 <code>font-family包含系统级中文字体，例如："PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 导出图片需用第三方库（如
html2canvas），但注意它无法捕获跨域字体或@font-face加载中的自定义字体 - 本地双击打开
file://协议时，html2canvas可能因 CORS 报错，必须起本地服务（如npx serve）
最小可行代码结构（复制即用，含实时预览）
<meta charset="UTF-8"><title>名片生成器</title><style>
#business-card { width: 300px; height: 180px; border: 1px solid #ccc; padding: 12px; font-family: "Microsoft YaHei", sans-serif; }
</style><input type="text" id="name" placeholder="姓名" oninput="render()"><input type="text" id="title" placeholder="职位" oninput="render()"><input type="text" id="phone" placeholder="电话" oninput="render()"><div id="business-card"></div>
<script>
function render() {
document.getElementById('business-card').innerHTML = `
<h3>${document.getElementById('name').value || '姓名'}
<p>${document.getElementById('title').value || '职位'}
<p>${document.getElementById('phone').value || '电话'}
`;
}
</script>
这个版本没做防空、没加样式美化，但已具备核心逻辑：改输入 → 立即看到效果。后续加圆角、配色、二维码、公司 logo，都是在这个骨架上叠加，不是重写。
真正卡住人的从来不是“怎么画一张名片”，而是“怎么让输入框和名片区域之间建立稳定、低延迟、不闪动的数据通道”——把 oninput 和 innerHTML（或更安全的 textContent）用对，比研究 SVG 导出参数重要得多。
