如何在C#与JavaScript间传递数组？VSTO+WebView2 Office插件场景

你遇到的问题是WebView2的hostObjects对CLR矩形多维数组（如int[,]）的类型映射支持不足，导致JS端无法正确解析。下面提供几种可行的解决方法：

方法1：使用锯齿数组（Jagged Array）替代多维数组 #

将C#中的int[,]改为int[][]（一维数组的数组），这种结构和JavaScript的嵌套数组完全匹配，能被hostObjects正确转换：

C#端代码：

public object test()
{
    int[][] xx = { new int[] { 1, 2, 3 }, new int[] { 3, 4, 5 } };
    return xx;
}

JS端无需修改原代码，就能正确输出[[1,2,3],[3,4,5]]。

方法2：序列化JSON字符串传递 #

如果必须保留多维数组结构，可以在C#端将数组序列化为JSON字符串，JS端接收后解析：

C#端代码（使用System.Text.Json）：

using System.Text.Json;

public string test()
{
    int[,] xx = { { 1, 2, 3 }, { 3, 4, 5 } };
    return JsonSerializer.Serialize(xx);
}

JS端代码修改为：

test () {
    return new Promise(async (resolve, reject) => {
        try {
            let jsonStr = await window.chrome.webview.hostObjects.control.test();
            let result = JSON.parse(jsonStr);
            console.log(result);
            resolve(result);
        } catch (error) {
            reject(error);
        }
    })
}

方法3：转换为泛型集合返回 #

将多维数组转换成List<List<int>>，WebView2对CLR泛型集合的映射支持良好：

C#端代码：

using System.Collections.Generic;

public List<List<int>> test()
{
    int[,] xx = { { 1, 2, 3 }, { 3, 4, 5 } };
    List<List<int>> result = new List<List<int>>();
    
    for (int i = 0; i < xx.GetLength(0); i++)
    {
        List<int> row = new List<int>();
        for (int j = 0; j < xx.GetLength(1); j++)
        {
            row.Add(xx[i, j]);
        }
        result.Add(row);
    }
    
    return result;
}

原因说明 #

WebView2的hostObjects在映射CLR类型到JS时，仅对与JS原生类型结构匹配的CLR类型有良好支持：

• 矩形多维数组（int[,]）是CLR特有的类型，JS中没有对应结构，因此无法被正确映射；
• 锯齿数组、泛型集合的结构和JS的嵌套数组一致，能被自动转换；
• JSON序列化的方式则完全绕开了类型映射的限制，通过字符串传递保证数据结构完整。

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