# 名片生成器使用教程：在线制作电子名片，实时预览一键导出 PDF/PNG

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/business-card-generator-guide

## 工具简介

**名片生成器**是工具派推出的一款在线电子名片制作工具：在左侧表单中填写姓名、职位、公司、联系方式等信息，右侧就会**实时预览**名片成品，所见即所得。工具内置商务蓝、深邃黑、活力橙、自然绿、优雅紫五种渐变主题，支持横版 / 竖版两种版式，可以上传 Logo，还能在名片上生成二维码——扫码即可把联系人信息存入手机通讯录。制作完成后可一键导出**高清 PNG 图片**或 **90×54mm 标准名片尺寸的 PDF 文件**，直接拿去印刷或线上发送。整个过程在浏览器本地完成，打开即用、无需安装。

## 功能亮点

- **实时预览**：左侧每填一个字段，右侧名片立刻同步更新，姓名、职位、公司、电话、邮箱、网址、地址一目了然。
- **五种主题风格**：商务蓝、深邃黑、活力橙、自然绿、优雅紫，均为质感渐变配色，一键切换。
- **横竖双版式**：横版为经典左右布局（信息在左、Logo 与二维码在右），竖版为上下排布，二维码居中置于底部。
- **Logo 上传**：支持上传任意图片格式（`image/*`），自动显示在名片右上方（横版）或姓名旁（竖版）。
- **五种二维码模式**：vCard 名片、网址、电话、邮箱、自定义文本，还可以取消勾选把二维码整个隐藏。
- **双格式导出**：PNG 按 3 倍分辨率渲染，清晰适合线上传播；PDF 按标准名片尺寸输出，适合送印刷厂。

## 参数说明

| 参数 | 说明 | 默认值 / 取值 |
| --- | --- | --- |
| 姓名 | 名片上的姓名，字号最大、加粗显示 | 张三 |
| 职位 | 姓名下方的职位 / 头衔 | 产品经理 |
| 公司 | 公司名称，半粗体显示 | 云瀚科技有限公司 |
| 电话 / 邮箱 / 网址 / 地址 | 联系方式，依次带 📞 ✉️ 🌐 📍 图标列出；留空的行不显示 | 预填示例值 |
| Logo（可选） | 上传本地图片作为名片 Logo，不传则不显示 | 无 |
| 主题风格 | 名片整体渐变配色 | 商务蓝（默认）/ 深邃黑 / 活力橙 / 自然绿 / 优雅紫 |
| 版式 | 名片方向与布局 | 横版（默认）/ 竖版 |
| 二维码内容 | 二维码承载的信息类型 | vCard 名片（默认）/ 网址 / 电话 / 邮箱 / 自定义 |
| 自定义内容 | 仅「自定义」模式下出现，多行文本框，内容原样编码进二维码 | 空 |
| 在名片上显示二维码 | 取消勾选后名片上不渲染二维码 | 默认勾选 |

## 使用步骤

1. **打开工具页面**：左侧是信息表单与样式设置区，右侧是名片实时预览和导出按钮，页面会预填一组示例数据，方便你先看清整体效果。

![名片生成器主界面：左侧为信息表单，含姓名、职位、公司、电话、邮箱、网址、地址输入框、Logo 上传、主题风格、版式与二维](article/202607/1783968745503_7415.png)

2. **填写名片信息**：依次填写姓名、职位、公司、电话、邮箱、网址和地址。每改一个字，右侧预览都会实时刷新；不需要的字段直接清空，该行就不会出现在名片上。

3. **上传 Logo（可选）**：点击「选择文件」上传公司或个人 Logo，图片会显示在横版名片的右上角；竖版则显示在姓名右侧。

4. **选择主题与版式**：在「主题风格」一行点选配色（选中项会有蓝色描边），在「版式」中切换横版 / 竖版，预览区会即时应用新样式。

5. **设置二维码**：在「二维码内容」中选择模式——选「vCard 名片」会把前面填写的全部信息打包成标准 vCard，扫码即可存入通讯录；选「网址 / 电话 / 邮箱」则分别生成打开网页、拨号、发邮件的二维码；选「自定义」可在出现的文本框中输入任意内容。不需要二维码时，取消勾选「在名片上显示二维码」即可。

6. **导出成品**：确认预览无误后，点「下载 PNG」保存 3 倍分辨率的高清图片，或点「导出 PDF」得到标准名片尺寸的 PDF（横版 90×54mm、竖版 54×90mm），导出时按页面右上角配额条的规则扣减次数。

## 使用技巧

- **首选 vCard 二维码**：商务交换场景下用默认的 vCard 模式最实用，对方扫码就能把姓名、公司、电话、邮箱、网址、地址一次性存进手机通讯录，省去手动输入。
- **网址不用写协议头**：网址填 `www.example.com` 即可，生成二维码时会自动补全为 `https://www.example.com`，保证扫码能正常打开。
- **电话二维码直接拨号**：选「电话」模式时生成的是 `tel:` 链接（自动剔除号码中的横杠等字符，只保留数字和 `+`），扫码后可直接唤起拨号。
- **信息越多二维码越密**：vCard 包含全部字段，图案会比较密集；如果印刷尺寸很小或担心识别率，可以只保留关键字段，或改用「网址」模式指向自己的在线主页。
- **竖版适合做社交名片**：竖版布局接近手机屏幕比例，二维码居中更大，适合放到朋友圈、社群或个人主页背景。
- **印刷用 PDF、线上用 PNG**：PDF 按 90×54mm 标准名片尺寸输出，交给印刷厂不用二次排版；PNG 是 3 倍分辨率高清图，发微信、做邮件签名都清晰。

## 常见问题

**Q1：二维码扫码后存不进通讯录？**
请确认「二维码内容」选择的是「vCard 名片」模式，该模式会按 vCard 3.0 标准打包姓名、职位、公司、电话、邮箱、网址、地址；其他模式只编码单一信息（网址 / 电话 / 邮箱），不会创建联系人。

**Q2：导出的 PDF 是多大尺寸？**
横版为 90×54mm、竖版为 54×90mm，即国内通用标准名片尺寸，可直接用于印刷；导出前记得把版式切到与期望一致的方向。

**Q3：为什么有的信息行在名片上没有显示？**
电话、邮箱、网址、地址这四行是「填了才显示」的，字段留空时整行自动隐藏；姓名、职位、公司留空则会显示「姓名 / 职位 / 公司名称」占位文字，提醒你需要补充。

**Q4：Logo 支持什么格式？**
只要是浏览器能显示的图片格式（`image/*`，如 PNG、JPG、SVG 等）都可以上传，建议用透明背景的 PNG Logo，在渐变底色上观感最好。

**Q5：「自定义」二维码模式填什么？**
任意文本都行，比如微信号、一段祝福、活动报名链接等，内容会原样编码进二维码。该模式下会出现一个多行文本框供你输入。