如何使用 WebView2 使用 XSL 转换显示 XML 内容？答案

【问题标题】：How to use WebView2 to display XML content using XSL transforms?如何使用 WebView2 使用 XSL 转换显示 XML 内容？
【发布时间】：2021-02-17 17:28:26
【问题描述】：

我正在使用 .Net Core 在 WPF 中创建一个应用程序，并且需要显示创作的 XML 内容。我们使用其他软件将 xml 转换为 html 以进行在线托管。但是，在创作时，我需要能够预览使用 xsl 文件转换的本地 XML 内容。我正在使用 Linq to XML。

我首先在TabItem 中创建了一个WebView2 控件。使用预发布版本 1.0.790，我尝试使用SetVirtualHostNameToFolderMapping，但没有成功。我一开始只是尝试使用示例代码的复制粘贴打开一个通用的 html 文件，但只收到一条消息说 appassets.example 的 IP 无法解析。我仔细检查了文件夹的位置，以及该文件夹中的文件。

我的下一个尝试是利用NavigateToString 并发送xml。这有几个问题。第一个是任何XProcessingInstruction 都被转换为评论，我想这是一个安全功能？没有它，我看到的只是内部 xml 内容。 xml 从以下位置更改：

<?xml-stylesheet type="text/xsl" href="Template-xsl.xsl"?>

进入评论：

<!--?xml-stylesheet type="text/xsl" href="Template-xsl.xsl"?-->

另一个不相关的问题是，如果我添加一个 InternalSubset，webview 无法识别关闭 ]> 我不确定这是否是一个 WebView 问题，所以我在 Notepad++ 中检查了它，它看起来是同样的问题。我试过删除空格和换行符，但没有任何改变。第一个实体似乎显示正常，但下一行始终是不同的颜色，这让我相信它以某种方式将第一个实体的结尾读取为结束 DocType。 DocType 的 XML 是：

<!DOCTYPE dmodule [
   <!ENTITY svg-test SYSTEM "svg-test.svg" NDATA svg >
   <!ENTITY svg-test1 SYSTEM "svg-test1.svg" NDATA svg >
]>

我刚开始创建一个字符串并更新InternalSubset。然后我尝试创建一个新的文档类型并插入与上述结果相同的文档类型。

string ent = Environment.NewLine;
                foreach (SVG s in sVGs)
                {
                    string en = "   <!ENTITY " + s.GraphicInfoEntityIdent + " SYSTEM \u0022" + s.FileName + "\u0022 NDATA svg >" + Environment.NewLine;
                    ent += en;
                }
                var doctype = new XDocumentType("dmodule", null, null, ent);
                xDoc.AddFirst(doctype);

我错过了什么，这是最好的方法吗？

编辑 1：我认为浏览器只会处理转换，但显然情况并非如此。使用 Martin 的建议，我返回并创建了一种新方法来在将 xml 传递给 Webview 之前对其进行转换。这似乎有效，但我不断收到 xslt 编译错误。它没有给我任何原因的迹象，所以我开始排除 xslt 脚本并找到罪魁祸首。我需要弄清楚如何让编译工作，因为没有它，转换将无法完全工作，但这是另一个问题。浏览器将显示转换后的 xml 内容。

【问题讨论】：

是否有任何 WebView 组件“导航”到一个不是 HTML 的字符串？我猜你的 XML 是由 HTML5 解析器解析的，即使你想将内容解析为 XML。也许您可以使用XslCompiledTransform 将 XML 转换为 HTML 并将结果传递给导航方法。
看看我自己关于使用WebView2 控件进行 XML/XSL 转换的问题和答案。 stackoverflow.com/a/68326542/2287576 有一个命令行选项可用于允许本地转换。

标签： xml wpf xslt .net-core webview2

【解决方案1】：

如果我在关注，你想要

定位本地 XML 文件和本地 XSL 文件
使用 XSL 将 XML 转换为 HTML 并显示 HTML 结果

我在浏览器转换方面从来没有运气，所以我有一个不同的解决方案给你。在您的 XPF 程序中运行转换并将 HTML 结果发送到浏览器。

使用您的 WPF 程序加载 XML、XSL 并将其转换为 HTML。由于 WPF 程序是“本地的”，因此它对本地文件具有完全的可见性。
在您的 WebView2 控件中加载一个特殊的网页。将您的 HTML 发布到 WebView2 窗口。下面的示例，注释脚本，用于捕获来自 XPF 程序的消息。
在您的 WPF 程序中，将第 1 步中的 HTML 发布到特殊网页。
最后，.JS 捕获消息 (HTML)，并用它更新页面。

这是一个特殊的网页，它监听来自 XPF 程序的 HTML。

<html>
    <head>
    </head>
    <body>
        <div id='xformhtml'/>
    </body>

    <script type='text/javascript'>

    let xformDiv = document.querySelector( "#xformhtml );

    if( window.chrome.webview ) {
        window.chrome.webview.addEventListener( 'message', event => {
            xformDiv.innerHTML = event.data;
        });
    } else {
        xformDiv.innerHTML = "<h2>Sorry webview communication not supported.</h2>"
    }
    </script>
</html>

此链接显示如何与示例页面进行通信。

https://github.com/MicrosoftEdge/WebView2Feedback/issues/247

【讨论】：

您可以使用一个命令行选项，它允许使用WebView2 进行本地XML 转换。请参阅我对问题的评论，其中包括我的解决方案的链接（对于 C++）。
@AndrewTruckle，您可以通过访问本地文件来启动 WebView2，这非常有趣。我有几个用途。感谢您发表评论。对我来说，浏览器转换是一个弱点（难以传递参数、添加扩展方法、xsl:include 其他 XSL 文件），并且通过在 C# 中使用 System.Xml 中的 XSLT 进行转换，我得到了更一致/可调试的结果.
是的，在某些情况下我也直接使用 C# 进行转换。但在大多数情况下，对于我的应用程序的性质和它的 XSL 转换要求，简单地在浏览器中显示结果对我来说就足够了。