Shell脚本如何生成HTML格式报告

wen 实用脚本 2026-07-17 2

本文目录导读：

Shell脚本如何生成HTML格式报告

基础HTML报告生成
带数据表格的报告
可复用的报告生成函数
带图表的报告（使用ASCII图表）
使用方法

我来为您介绍几种使用Shell脚本生成HTML报告的方法：

基础HTML报告生成

最简单的示例

#!/bin/bash
# 生成HTML报告
cat > report.html << EOF
<!DOCTYPE html>
<html>
<head>系统报告</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        h1 { color: #333; }
        .info { background: #f5f5f5; padding: 10px; border-radius: 5px; }
    </style>
</head>
<body>
    <h1>系统状态报告</h1>
    <div class="info">
        <p>生成时间: $(date)</p>
        <p>主机名: $(hostname)</p>
        <p>IP地址: $(hostname -I)</p>
    </div>
</body>
</html>
EOF
echo "报告已生成: report.html"

带数据表格的报告

#!/bin/bash
report_file="system_report_$(date +%Y%m%d).html"
# 获取系统信息
get_system_info() {
    echo "<table border='1' cellspacing='0' cellpadding='5'>"
    echo "<tr><th>指标</th><th>值</th></tr>"
    echo "<tr><td>CPU使用率</td><td>$(top -bn1 | grep "Cpu(s)" | awk '{print $2}')%</td></tr>"
    echo "<tr><td>内存使用</td><td>$(free -h | awk '/^Mem:/ {print $3"/"$2}')</td></tr>"
    echo "<tr><td>磁盘使用</td><td>$(df -h / | awk 'NR==2 {print $5}')</td></tr>"
    echo "<tr><td>运行时间</td><td>$(uptime -p)</td></tr>"
    echo "</table>"
}
# 生成完整报告
cat > $report_file << EOF
<!DOCTYPE html>
<html>
<head>系统监控报告</title>
    <style>
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; margin: 30px; background: #f0f0f0; }
        .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        th { background: #3498db; color: white; padding: 10px; }
        td { padding: 10px; text-align: center; }
        tr:nth-child(even) { background: #f2f2f2; }
        .footer { text-align: center; color: #7f8c8d; margin-top: 30px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>📊 系统监控报告</h1>
        <p><strong>生成时间:</strong> $(date '+%Y-%m-%d %H:%M:%S')</p>
        <h2>系统概况</h2>
        $(get_system_info)
        <h2>磁盘使用情况</h2>
        <pre>$(df -h)</pre>
        <div class="footer">
            <p>由 $(whoami) 于 $(hostname) 生成</p>
        </div>
    </div>
</body>
</html>
EOF
echo "报告已生成: $report_file"

可复用的报告生成函数

#!/bin/bash
# 报告生成器函数
generate_html_report() {
    local title="$1"
    local content="$2"
    local filename="$3"
    cat > "$filename" << EOF
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">$title</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            line-height: 1.6; 
            color: #333; 
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 900px;
            margin: 20px auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            font-size: 28px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid #3498db;
        }
        .meta {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 25px;
            font-size: 14px;
            color: #666;
        }
        .content {
            margin: 20px 0;
        }
        .footer {
            text-align: center;
            padding: 20px 0 0;
            border-top: 1px solid #eee;
            margin-top: 30px;
            color: #999;
            font-size: 13px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        th, td {
            border: 1px solid #dee2e6;
            padding: 12px;
            text-align: left;
        }
        th {
            background: #3498db;
            color: white;
        }
        tr:hover {
            background: #f5f5f5;
        }
        .success { color: #27ae60; font-weight: bold; }
        .warning { color: #f39c12; font-weight: bold; }
        .error { color: #e74c3c; font-weight: bold; }
    </style>
</head>
<body>
    <div class="container">
        <h1>📑 $title</h1>
        <div class="meta">
            <span>📅 生成时间: $(date '+%Y-%m-%d %H:%M:%S')</span>
            <span style="margin-left: 20px;">🖥️ 主机: $(hostname)</span>
            <span style="margin-left: 20px;">👤 用户: $(whoami)</span>
        </div>
        <div class="content">
            $content
        </div>
        <div class="footer">
            <p>Automated Report Generated by Shell Script</p>
        </div>
    </div>
</body>
</html>
EOF
    echo "报告已生成: $filename"
}
# 使用示例
create_system_report() {
    local content=""
    # 添加CPU信息
    content+="<h2>💻 CPU信息</h2>"
    content+="<pre>$(lscpu | head -10)</pre>"
    # 添加内存信息
    content+="<h2>🧮 内存使用</h2>"
    content+="<table>
        <tr><th>类型</th><th>总量</th><th>已用</th><th>可用</th><th>使用率</th></tr>
        <tr>
            <td>物理内存</td>
            <td>$(free -h | awk '/^Mem:/ {print $2}')</td>
            <td>$(free -h | awk '/^Mem:/ {print $3}')</td>
            <td>$(free -h | awk '/^Mem:/ {print $4}')</td>
            <td>$(free | awk '/^Mem:/ {printf "%.1f%%", $3/$2*100}')</td>
        </tr>
    </table>"
    # 添加磁盘信息
    content+="<h2>💾 磁盘使用</h2>"
    content+="<table>
        <tr><th>文件系统</th><th>大小</th><th>已用</th><th>可用</th><th>使用率</th><th>挂载点</th></tr>"
    while read line; do
        if [[ $line =~ ^/dev/ ]]; then
            content+="<tr>"
            for col in $line; do
                content+="<td>$col</td>"
            done
            content+="</tr>"
        fi
    done <<< "$(df -h)"
    content+="</table>"
    # 添加进程信息
    content+="<h2>🔝 前5个CPU占用进程</h2>"
    content+="<pre>$(ps aux --sort=-%cpu | head -6)</pre>"
    generate_html_report "系统性能报告" "$content" "system_report_$(date +%Y%m%d_%H%M%S).html"
}
# 运行报告生成
create_system_report

带图表的报告（使用ASCII图表）

#!/bin/bash
# 生成带ASCII图表的报告
generate_chart_report() {
    local cpu_usage=$(top -bn1 | grep "Cpu(s)" | awk '{print $2}' | cut -d. -f1)
    local mem_usage=$(free | awk '/^Mem:/ {printf "%.0f", $3/$2*100}')
    # 生成CPU图表
    local cpu_chart=""
    for ((i=0; i<20; i++)); do
        if [ $i -lt $((cpu_usage/5)) ]; then
            cpu_chart+="█"
        else
            cpu_chart+="░"
        fi
    done
    # 生成内存图表
    local mem_chart=""
    for ((i=0; i<20; i++)); do
        if [ $i -lt $((mem_usage/5)) ]; then
            mem_chart+="█"
        else
            mem_chart+="░"
        fi
    done
    cat > chart_report.html << EOF
<!DOCTYPE html>
<html>
<head>系统资源图表报告</title>
    <style>
        body { font-family: 'Courier New', monospace; }
        .bar { display: inline-block; min-width: 200px; }
        .bar-fill { background: #3498db; color: white; padding: 2px 5px; }
        .chart-container { margin: 20px 0; }
    </style>
</head>
<body>
    <h1>系统资源使用图表</h1>
    <div class="chart-container">
        <h3>CPU使用率: ${cpu_usage}%</h3>
        <div style="background: #eee; width: 400px; height: 20px;">
            <div style="background: #3498db; width: ${cpu_usage}%; height: 20px; text-align: center; color: white;">
                ${cpu_usage}%
            </div>
        </div>
    </div>
    <div class="chart-container">
        <h3>内存使用率: ${mem_usage}%</h3>
        <div style="background: #eee; width: 400px; height: 20px;">
            <div style="background: #e74c3c; width: ${mem_usage}%; height: 20px; text-align: center; color: white;">
                ${mem_usage}%
            </div>
        </div>
    </div>
</body>
</html>
EOF
}

使用方法

运行脚本

# 保存脚本为 generate_report.sh
chmod +x generate_report.sh
# 执行脚本
./generate_report.sh
# 或者在浏览器中查看
xdg-open report.html  # Linux
open report.html      # macOS
start report.html     # Windows Git Bash

定时生成报告

# 每5分钟生成一次报告
*/5 * * * * /path/to/generate_report.sh
# 每小时生成一次
0 * * * * /path/to/generate_report.sh

这些脚本可以根据您的具体需求进行修改和扩展，您可以根据报告的内容和格式要求,调整HTML结构和CSS样式。