实现 ASCII 艺术字 工具

分类：general ｜ 标签：ASCII、figlet、艺术字 文字转 ASCII 艺术字（figlet）

2.1 功能说明

文字转 ASCII 艺术字（figlet）

核心能力

• 文本
• 字体

2.1.1 使用指南

把文字渲染成终端风格的 ASCII 艺术字，可用于 README 装饰、Banner、终端欢迎语。

• 字体已内置（Standard / Slant / Banner / Big / Block / Script / Shadow / Speed）。
• 文本建议不超过 20 字符，过长会超出屏幕。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• render()
• copyOut()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'
import figlet from 'figlet'
import Standard from 'figlet/importable-fonts/Standard.js'
import Slant from 'figlet/importable-fonts/Slant.js'
import Banner from 'figlet/importable-fonts/Banner.js'
import Big from 'figlet/importable-fonts/Big.js'
import Block from 'figlet/importable-fonts/Block.js'
import Script from 'figlet/importable-fonts/Script.js'
import Shadow from 'figlet/importable-fonts/Shadow.js'
import Speed from 'figlet/importable-fonts/Speed.js'

const fonts = ['Standard', 'Slant', 'Banner', 'Big', 'Block', 'Script', 'Shadow', 'Speed']
const raw = { Standard, Slant, Banner, Big, Block, Script, Shadow, Speed }

const text = ref('Hello')
const font = ref('Standard')
const output = ref('')
const error = ref('')

onMounted(() => {
  for (const f of fonts) figlet.parseFont(f, raw[f])
  render()
})

function render() {
  error.value = ''
  const t = text.value
  if (!t) {
    output.value = ''
    return
  }
  figlet
    .text(t, { font: font.value })
    .then((res) => {
      output.value = res
    })
    .catch((e) => {
      error.value = '生成失败：' + (e && e.message ? e.message : String(e))
    })
}

function copyOut() {
  if (!output.value) return
  navigator.clipboard?.writeText(output.value).then(
    () => ElMessage.success('已复制'),
    () => ElMessage.warning('复制失败，请手动选择')
  )
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/figlet