使用saveSvgAsPng.js在IE中无法将D3 SVG图表导出为PNG的问题求助

我帮你拆解下这个问题的核心原因，以及对应的可行解决办法：

问题根源 #

IE浏览器对SVG转PNG的支持存在两个关键限制：

1. 字体解析障碍：saveSvgAsPng无法正确处理远程加载的Google Fonts（比如你用到的Karla字体），IE对CSS字体链接的处理逻辑和现代浏览器不同，导致工具识别不了字体格式，触发字体相关报错。
2. 下载API缺失：旧版IE不支持现代浏览器依赖的Blob/URL.createObjectURL等下载API，直接调用saveSvgAsPng会触发"Rendered SVG images cannot be downloaded in this browser"的错误。

具体解决步骤 #

1. 修复字体加载问题 #

把远程字体转换成Base64编码嵌入到SVG的内联样式中，让saveSvgAsPng能直接读取字体数据，规避跨域和格式识别问题：

• 下载Karla字体的TTF文件，通过Base64编码工具转换成字符串
• 在你的D3图表SVG中添加内联样式：

<style type="text/css">
@font-face {
    font-family: 'Karla';
    src: url(data:font/truetype;base64,[你的Base64编码字符串]) format('truetype');
}
/* 补充你用到Karla字体的样式规则 */
</style>

2. 适配IE的下载逻辑 #

添加浏览器检测，当识别到IE时，改用IE专属的msSaveBlob方法处理下载：

// 检测是否为IE浏览器
function isIE() {
    return window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
}

// 自定义兼容下载函数
function downloadChart() {
    const svgElement = document.getElementById("sample");
    if (isIE()) {
        // IE环境下的处理逻辑
        saveSvgAsPng(svgElement, "sample.png", {
            width: 800, // 改用具体像素值，避免百分比在IE中失效
            encoderOptions: 0.9 // 可选：设置图片质量
        }, function(canvas) {
            // 将canvas转换为Blob，用msSaveBlob触发下载
            canvas.toBlob(function(blob) {
                window.navigator.msSaveBlob(blob, "sample.png");
            });
        });
    } else {
        // 现代浏览器保持原有调用逻辑
        saveSvgAsPng(svgElement, "sample.png", { width: '50%' });
    }
}

3. 调整参数细节 #

把width: '50%'替换为具体的像素值（比如width: 800），IE对百分比尺寸的SVG转PNG支持不佳，容易引发渲染错位或失败。

额外提示 #

如果你的图表中引用了外部图片，也要确保它们是同域资源，或者转换成Base64嵌入SVG，否则IE会因为跨域问题无法正常渲染这些资源。

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