Highcharts自定义导出菜单添加复制到剪贴板按钮报错解决

针对你遇到的“Failed to read or decode Blob for clipboard item type image/png”错误，核心问题出在SVG转PNG的流程中生成的Blob无效，或者剪贴板写入时机不对。以下是修复方案：

修复后的代码实现 #

修改Highcharts导出按钮的自定义点击逻辑，确保SVG转Canvas、生成Blob、写入剪贴板的流程正确：

Highcharts.chart('container', {
    // 图表基础配置...
    exporting: {
        buttons: {
            customButton: {
                text: '复制到剪贴板',
                onclick: async function() {
                    const chart = this;
                    // 获取带尺寸信息的SVG
                    const svg = chart.getSVG({
                        exporting: {
                            sourceWidth: chart.chartWidth,
                            sourceHeight: chart.chartHeight
                        }
                    });

                    // 将SVG转为Blob URL
                    const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
                    const svgUrl = URL.createObjectURL(svgBlob);
                    
                    const img = new Image();
                    img.crossOrigin = 'anonymous';

                    try {
                        await new Promise((resolve, reject) => {
                            img.onload = resolve;
                            img.onerror = () => reject(new Error('SVG加载失败，无法渲染图表'));
                            img.src = svgUrl;
                        });

                        // 创建Canvas并绘制图像
                        const canvas = document.createElement('canvas');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                        URL.revokeObjectURL(svgUrl);

                        // 转换Canvas为PNG Blob并写入剪贴板
                        await new Promise((resolve, reject) => {
                            canvas.toBlob(async (blob) => {
                                if (!blob || blob.type !== 'image/png') {
                                    return reject(new Error('生成的Blob不是有效的PNG格式'));
                                }
                                
                                try {
                                    const clipboardItem = new ClipboardItem({ 'image/png': blob });
                                    await navigator.clipboard.write([clipboardItem]);
                                    alert('图表已成功复制到剪贴板');
                                    resolve();
                                } catch (clipboardErr) {
                                    reject(clipboardErr);
                                }
                            }, 'image/png');
                        });
                    } catch (err) {
                        console.error('复制流程出错:', err);
                        alert('复制失败：' + err.message);
                        URL.revokeObjectURL(svgUrl);
                    }
                }
            }
        }
    }
});

关键修复点 #

• 确保SVG加载完成：用Promise等待Image加载成功，避免在SVG未渲染时就绘制Canvas
• 明确Blob类型：调用toBlob时指定image/png，确保生成的Blob格式符合剪贴板要求
• 异步流程控制：用async/await处理所有异步操作，保证剪贴板写入时Blob已完全生成
• 错误捕获与清理：添加SVG加载、Blob生成、剪贴板写入各环节的错误处理，同时及时释放Blob URL资源

额外注意事项 #

• 剪贴板操作必须在用户交互上下文（如按钮点击）中执行，Chrome会拦截非交互触发的剪贴板操作
• 如果图表使用了自定义字体，需要将字体文件内联到SVG中（可通过Highcharts的exporting.allowHTML或手动修改SVG内容实现），否则Canvas绘制会丢失字体样式，甚至导致Blob无效
• 确保Chrome版本在76及以上，该版本开始支持ClipboardItem接口

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