Access导出带图表的 HTML 报表：技术实现详解

Hi，大家好！

上周我分享了把表中数据导出为 HTML 的实现；这次聚焦进阶：如何把图表也导出到 HTML 中并保持交互性与可移植性。

开始前，给大家再汇报一下框架的情况，由于近两月参与其他项目的交付，框架开发有所延后；现已调整优先级，计划本月先发布一版可用实现，后续再按需迭代与优化。本来我也是游刃有余，现在是匆匆忙忙，不过这个Flag先立下了。

在 Access 开发中，我们经常需要将数据以可视化的方式呈现。今天分享一个实用技术：使用 VBA 生成包含交互式图表的 HTML 报表。

一、技术方案选择

Access 导出图表到 HTML 主要有两种方式：

使用内置 OutputTo：会将图表转为静态图片，文件体积大

使用 JavaScript 图表库：生成可交互的矢量图表，文件小且效果好

本文采用第二种方案，使用 Chart.js 库实现。

二、创建表与窗体

接着，我们要准备好数据，可以像这样：

表有了，那我们再创建一个简单的窗体：

三、核心实现代码

以下是一个完整的导出函数，从数据库读取数据并生成带图表的 HTML：

vbscript 复制代码

' 导出带 Chart.js 图表的 HTML
Public Sub ExportHTMLWithChartJS()
    Dim rs As DAO.Recordset
    Dim html As String
    Dim labels As String
    Dim dataValues As String
    
    ' 获取数据
    Set rs = CurrentDb.OpenRecordset("SELECT 月份, 销售额 FROM tblSales ORDER BY 月份")
    
    ' 构建图表数据
    labels = ""
    dataValues = ""
    Do While Not rs.EOF
        labels = labels & "'" & rs!月份 & "',"
        dataValues = dataValues & rs!销售额 & ","
        rs.MoveNext
    Loop
    rs.Close
    
    ' 去掉最后的逗号
    If Len(labels) > 0 Then
        labels = Left(labels, Len(labels) - 1)
        dataValues = Left(dataValues, Len(dataValues) - 1)
    End If
    
    ' 构建 HTML
    html = "<!DOCTYPE html>" & vbCrLf
    html = html & "<html lang='zh-CN'>" & vbCrLf
    html = html & "<head>" & vbCrLf
    html = html & "  <meta charset='utf-8'>" & vbCrLf
    html = html & "  <meta name='viewport' content='width=device-width, initial-scale=1'>" & vbCrLf
    html = html & "  <title>销售趋势图</title>" & vbCrLf
    
    ' 引入 Chart.js
    html = html & "  <script src='https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'></script>" & vbCrLf
    
    html = html & "  <style>" & vbCrLf
    html = html & "    body { font-family: 'Microsoft YaHei', sans-serif; margin: 20px; background: #f5f5f5; }" & vbCrLf
    html = html & "    .container { max-width: 1200px; margin: 0 auto; background: white; padding: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }" & vbCrLf
    html = html & "    h1 { color: #333; text-align: center; }" & vbCrLf
    html = html & "    .chart-container { position: relative; height: 400px; margin-top: 30px; }" & vbCrLf
    html = html & "  </style>" & vbCrLf
    html = html & "</head>" & vbCrLf
    html = html & "<body>" & vbCrLf
    html = html & "  <div class='container'>" & vbCrLf
    html = html & "    <h1>销售趋势分析</h1>" & vbCrLf
    html = html & "    <p style='text-align: center; color: #666;'>数据更新时间：" & Now & "</p>" & vbCrLf
    
    ' 图表容器
    html = html & "    <div class='chart-container'>" & vbCrLf
    html = html & "      <canvas id='salesChart'></canvas>" & vbCrLf
    html = html & "    </div>" & vbCrLf
    html = html & "  </div>" & vbCrLf
    
    ' JavaScript 图表代码
    html = html & "  <script>" & vbCrLf
    html = html & "    const ctx = document.getElementById('salesChart');" & vbCrLf
    html = html & "    new Chart(ctx, {" & vbCrLf
    html = html & "      type: 'bar'," & vbCrLf
    html = html & "      data: {" & vbCrLf
    html = html & "        labels: [" & labels & "]," & vbCrLf
    html = html & "        datasets: [{" & vbCrLf
    html = html & "          label: '销售额（万元）'," & vbCrLf
    html = html & "          data: [" & dataValues & "]," & vbCrLf
    html = html & "          borderColor: 'rgb(75, 192, 192)'," & vbCrLf
    html = html & "          backgroundColor: 'rgba(75, 192, 192, 0.2)'," & vbCrLf
    html = html & "          tension: 0.1" & vbCrLf
    html = html & "        }]" & vbCrLf
    html = html & "      }," & vbCrLf
    html = html & "      options: {" & vbCrLf
    html = html & "        responsive: true," & vbCrLf
    html = html & "        maintainAspectRatio: false," & vbCrLf
    html = html & "        plugins: {" & vbCrLf
    html = html & "          legend: { display: true, position: 'top' }," & vbCrLf
    html = html & "          title: { display: false }" & vbCrLf
    html = html & "        }" & vbCrLf
    html = html & "      }" & vbCrLf
    html = html & "    });" & vbCrLf
    html = html & "  </script>" & vbCrLf
    html = html & "</body>" & vbCrLf
    html = html & "</html>"
    
    ' 保存文件
    WriteUTF8File "C:\Users\Desktop\html\SalesChart.html", html
    
    MsgBox "图表导出完成！", vbInformation
End Sub
' UTF-8 写入函数
Private Sub WriteUTF8File(filePath As String, content As String)
    Dim stream As Object
    Set stream = CreateObject("ADODB.Stream")
    With stream
        .Type = 2
        .Charset = "utf-8"
        .Open
        .WriteText content
        .SaveToFile filePath, 2
        .Close
    End With
    Set stream = Nothing
End Sub

四、技术要点说明

4.1 数据格式化

Chart.js 需要 JavaScript 数组格式的数据：

标签：['一月', '二月', '三月']

数值：[100, 200, 150]

在 VBA 中通过字符串拼接实现，注意去掉最后的逗号。

4.2 图表类型

Chart.js 支持多种图表类型，只需修改 type 参数：

line：折线图

bar：柱状图

pie：饼图

doughnut：环形图

radar：雷达图

4.3 响应式设计

关键配置：

配合 CSS：

4.4 中文支持

必须做到三点：

HTML 头部声明：<meta charset='utf-8'>

使用 UTF-8 保存文件

指定中文字体：font-family: 'Microsoft YaHei'

输出的样式：

五、常见问题

Q1：图表不显示？

检查浏览器控制台是否有 JavaScript 错误，通常是数据格式问题。

Q2：离线使用怎么办？

下载 Chart.js 文件到本地，修改引用路径：

六、扩展应用

这个技术可以应用到：

MRP 运算结果可视化
库存波动趋势分析
生产进度监控仪表板
质量分析图表

通过 VBA 自动化生成，可以实现定时导出、批量生成等功能。

如果你觉得这篇技术分享有用，欢迎点赞收藏。需要完整示例代码的朋友，可以在评论区留言交流。