求助：无法使用XSLT 2.0将XML转换为HTML的解决方案

一、修复服务端Saxon-HE的TypeInitializationException异常 #

• 确保使用兼容.NET 7的最新版Saxon-HE，通过NuGet包管理器安装（不要手动下载DLL），当前推荐版本为12.x。
• 检查XSLT文件语法：确认所有XSLT 2.0特性（如xsl:for-each-group、xsl:sequence）的命名空间正确（xmlns:xsl="http://www.w3.org/1999/XSL/Transform"且version="2.0"），无拼写错误。
• 使用正确的Saxon-HE初始化代码：

using Saxon.Api;

// 初始化处理器
var processor = new Processor();
var xsltCompiler = processor.NewXsltCompiler();

// 编译XSLT
var xsltExecutable = xsltCompiler.Compile(new Uri("your-style.xsl"));
var transformer = xsltExecutable.Load();

// 设置输入XML和输出HTML
transformer.SetInputXml(new Uri("your-data.xml"));
var serializer = processor.NewSerializer();
serializer.SetOutputWriter(new StreamWriter("output.html"));

// 执行转换
transformer.Run(serializer);

• 排查异常根源：若仍报错，检查项目依赖是否完整（Saxon-HE依赖IKVM.Runtime等组件，NuGet会自动安装），以及文件读写权限是否充足。

二、客户端正确使用Saxon-JS在React中转换 #

• 通过npm安装最新版Saxon-JS：npm install saxon-js
• 在React组件中异步加载XML和XSLT文件，注意文件路径（本地文件需放在public目录）：

import SaxonJS from 'saxon-js';

const XmlToHtml = () => {
  const transformAndRender = async () => {
    // 获取XML和XSLT内容
    const xmlRes = await fetch('/data.xml');
    const xmlText = await xmlRes.text();
    const xsltRes = await fetch('/style.xsl');
    const xsltText = await xsltRes.text();

    // 编译XSLT为SEF格式（可提前编译好SEF文件优化性能）
    const sef = await SaxonJS.compile(xsltText);
    
    // 执行转换
    const result = await SaxonJS.transform({
      source: xmlText,
      stylesheetInternal: sef,
      destination: 'serialized'
    });

    // 将转换后的HTML插入DOM
    document.getElementById('html-output').innerHTML = result.principalResult;
  };

  return (
    <div>
      <button onClick={transformAndRender}>转换并展示</button>
      <div id="html-output"></div>
    </div>
  );
};

export default XmlToHtml;

• 注意CORS问题：若XML/XSLT来自外部域名，需确保服务端配置了CORS允许访问。

三、降级XSLT到1.0（若业务允许） #

如果XSLT的2.0特性可替代，将其修改为1.0语法，即可使用浏览器原生XSLTProcessor或.NET原生XslCompiledTransform：

• 示例：将XSLT 2.0的分组逻辑改为1.0实现：
  原2.0代码：

<xsl:for-each-group select="items/item" group-by="@category">
  <h2><xsl:value-of select="current-grouping-key()"/></h2>
  <xsl:for-each select="current-group()">
    <p><xsl:value-of select="."/></p>
  </xsl:for-each>
</xsl:for-each-group>

改为1.0代码（使用xsl:key模拟分组）：

<xsl:key name="items-by-category" match="items/item" use="@category"/>

<xsl:for-each select="items/item[generate-id() = generate-id(key('items-by-category', @category)[1])]">
  <h2><xsl:value-of select="@category"/></h2>
  <xsl:for-each select="key('items-by-category', @category)">
    <p><xsl:value-of select="."/></p>
  </xsl:for-each>
</xsl:for-each>

• 浏览器端使用原生API转换示例：

const transformWithNative = async () => {
  const xmlRes = await fetch('/data.xml');
  const xmlDoc = await xmlRes.text();
  const xsltRes = await fetch('/style.xsl');
  const xsltDoc = await xsltRes.text();

  const parser = new DOMParser();
  const xml = parser.parseFromString(xmlDoc, 'application/xml');
  const xslt = parser.parseFromString(xsltDoc, 'application/xml');

  const processor = new XSLTProcessor();
  processor.importStylesheet(xslt);
  const resultDoc = processor.transformToDocument(xml);
  const resultHtml = new XMLSerializer().serializeToString(resultDoc);

  document.getElementById('html-output').innerHTML = resultHtml;
};

四、用Node.js做中间层转换 #

搭建Node.js服务处理XSLT转换，React通过API获取转换后的HTML：

• 安装依赖：npm install saxon-js express fs-extra
• Node.js转换代码：

const SaxonJS = require('saxon-js');
const fs = require('fs-extra');
const express = require('express');
const app = express();

app.get('/transform', async (req, res) => {
  try {
    const xml = await fs.readFile('data.xml', 'utf8');
    const xslt = await fs.readFile('style.xsl', 'utf8');
    const sef = await SaxonJS.compile(xslt);
    const result = await SaxonJS.transform({
      source: xml,
      stylesheetInternal: sef,
      destination: 'serialized'
    });
    res.send(result.principalResult);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(3001, () => console.log('转换服务运行在3001端口'));

• React中调用接口：

const fetchTransformedHtml = async () => {
  const res = await fetch('http://localhost:3001/transform');
  const html = await res.text();
  document.getElementById('html-output').innerHTML = html;
};

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