MacOS下pywebview中Altair图表‘Save as PNG’按钮无响应

问题详情 #

在使用PyWebView展示Pandas+Altair绘制的数据分析图表时，MacOS系统出现以下异常：

• 点击图表自带的「Save as PNG」按钮无任何响应
• 点击「Save to SVG」按钮仅会聚焦图表并锁定窗口，无法完成保存操作
  Windows系统下该功能可正常工作，且已在全新虚拟环境中测试，问题复现。

依赖版本 #

pandas==2.0.3
pywebview==4.2.2
altair==5.0.1
PyAutoGUI==0.9.54

核心代码片段 #

import pandas as pd
import altair as alt
import webview
import pyautogui

# ... 数据预处理（列重命名、排序等操作）

x_domain = [min(pd.DatetimeIndex(grouped_by_day.datetime) - pd.DateOffset(1)), max(pd.DatetimeIndex(grouped_by_day.datetime) + pd.DateOffset(1))]
y_domain = [min(grouped_by_day.glucose_value) - 10, max(grouped_by_day.glucose_value) + 10]

glucose = alt.Chart(grouped_by_day, title=alt.Title("Average Blood Glucose", fontSize=24)).mark_line(point=True).encode(
    x = alt.X('datetime:T',
                scale=alt.Scale(domain=x_domain),
                title="Date"
                ),
    y = alt.Y('glucose_value:Q', 
                scale=alt.Scale(domain=y_domain),
                title="Blood Glucose (mg/dL)"
                ),
    tooltip=[alt.Tooltip('datetime', title='Date'), alt.Tooltip('glucose_value', title='Glucose Value')]
).properties(
    width=screen_width-600,
    height=screen_heigth-400,
)

charts_html = f"""
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>

<div id="vis1"></div>
<div id="vis2"></div>
<div id="vis3"></div>
<div id="vis4"></div>

<script type="text/javascript">
vegaEmbed('#vis1', {glucose.to_json()});
</script>
</body>
</html>
"""

webview.create_window('Dexcom Data Analysis', html=charts_html, width=screen_width, height=screen_heigth-50)
webview.start()

解决办法 #

1. 修复PyWebView后端权限配置 #

PyWebView在MacOS上默认使用Cocoa后端，文件保存对话框需要正确的权限配置，开启private_mode=False可解决权限限制问题：

webview.create_window(
    'Dexcom Data Analysis', 
    html=charts_html, 
    width=screen_width, 
    height=screen_heigth-50,
    private_mode=False
)
webview.start()

2. 自定义保存逻辑绕过WebView兼容性问题 #

Vega-Embed的默认保存功能依赖浏览器原生下载API，MacOS的PyWebView对该API支持存在缺陷，可通过Python端接管保存流程：

Python端添加API处理类

import pandas as pd
import altair as alt
import webview
import base64
from pathlib import Path

# ... 数据预处理部分不变

class ChartSaveApi:
    def save_chart(self, format_type, data):
        save_path = Path.home() / f"blood_glucose_chart.{format_type}"
        if format_type == 'png':
            # 解码base64格式的PNG数据
            img_bytes = base64.b64decode(data.split(',')[1])
            with open(save_path, 'wb') as f:
                f.write(img_bytes)
        elif format_type == 'svg':
            with open(save_path, 'w', encoding='utf-8') as f:
                f.write(data)
        print(f"图表已保存至: {save_path}")

# 创建窗口时绑定API
webview.create_window(
    'Dexcom Data Analysis', 
    html=charts_html, 
    width=screen_width, 
    height=screen_heigth-50,
    js_api=ChartSaveApi()
)
webview.start()

修改HTML中的Vega-Embed配置

替换默认保存按钮行为，调用Python端API完成保存：

<script type="text/javascript">
vegaEmbed('#vis1', {glucose.to_json()}, {
  actions: {
    source: false,
    compiled: false,
    editor: false,
    // 自定义SVG保存逻辑
    exportSVG: function(chart) {
      chart.saveSVG().then(svgContent => {
        window.pywebview.api.save_chart('svg', svgContent);
      });
    },
    // 自定义PNG保存逻辑
    exportPNG: function(chart) {
      chart.savePNG().then(pngBase64 => {
        window.pywebview.api.save_chart('png', pngBase64);
      });
    }
  }
});
</script>

3. 升级PyWebView版本 #

PyWebView 4.2.2在MacOS上存在已知的文件交互bug，升级到最新版本可修复部分兼容性问题：

pip install --upgrade pywebview

内容的提问来源于stack exchange，提问作者KJ0797