XSLT 在客户端（浏览器）执行的全攻略（2025 年现状）
虽然现在很多人都以为 XSLT 已经“死了”，但实际上直到 2025 年，所有主流浏览器仍然原生支持 XSLT 1.0（部分支持 2.0/3.0），而且在以下场景中依然非常有用且高效：
- 纯静态网站渲染 XML + XSL（零 JavaScript）
- 企业内部系统、文档系统（DocBook、DITA 等）
- 本地 HTML 电子书、离线报表
- 一些政府/金融系统的合规要求必须用 XSLT
1. 浏览器原生支持情况（2025 年）
| 浏览器 | XSLT 版本 | 是否支持 | 备注 |
|---|---|---|---|
| Chrome / Edge (Chromium) | XSLT 1.0 | 支持（自 2004 年起一直支持） | 不支持 XSLT 2.0+ |
| Firefox | XSLT 1.0 + 2.0 + 3.0 | 完全支持（全球唯一） | 最佳选择 |
| Safari (macOS/iOS) | XSLT 1.0 | 支持 | 不支持 2.0+ |
| Opera | XSLT 1.0 | 支持 |
结论：想在所有浏览器都稳定运行，只能用 XSLT 1.0。
2. 两种经典的客户端执行方式
方式一：XML 文件中直接嵌入 XSL（最经典、最简单）
<!-- data.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<library>
<book id="1">
<title>XSLT 2.0 和 XPath 2.0 编程指南</title>
<author>王晓华</author>
<price>98.00</price>
</book>
<!-- 更多 book -->
</library>直接在浏览器打开 data.xml，就会自动用 style.xsl 渲染成 HTML，无需任何服务器、无需 JavaScript！
方式二：用 JavaScript 手动加载并执行 XSLT（更灵活）
适用于：
- XML 和 XSL 跨域
- 想动态切换多个 XSL
- 需要在 SPA（Vue/React）中嵌入 XML 内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XSLT 客户端转换演示</title>
</head>
<body>
<div id="result"></div>
<script>
async function transform() {
// 1. 加载 XML 和 XSL
const xmlResp = await fetch('books.xml');
const xslResp = await fetch('style.xsl');
const xmlText = await xmlResp.text();
const xslText = await xslResp.text();
const xmlDoc = new DOMParser().parseFromString(xmlText, 'text/xml');
const xslDoc = new DOMParser().parseFromString(xslText, 'text/xml');
// 2. 创建处理器
const processor = new XSLTProcessor();
processor.importStylesheet(xslDoc);
// 可选：传参数
processor.setParameter(null, 'today', new Date().toLocaleDateString());
// 3. 执行转换
const resultDoc = processor.transformToFragment(xmlDoc, document);
// 4. 插入页面
document.getElementById('result').innerHTML = '';
document.getElementById('result').appendChild(resultDoc);
}
// 页面加载完就执行
transform();
</script>
</body>
</html>3. 现代替代方案（当你真的不想用原生 XSLT 时）
| 方案 | 优点 | 缺点 | 推荐场景 |
|---|---|---|---|
| Saxon-JS 2 | 真正的 XSLT 3.0，在浏览器运行 | 文件大（~600KB） | 需要 XSLT 3.0 高级功能 |
| Fongsh（https://fongsh.github.io） | 超轻量（<20KB），支持 XSLT 1.0 | 功能不如原生完整 | 移动端、轻量项目 |
| 直接用 JS 模板（React/Vue/Handlebars） | 生态好、灵活 | 失去 XSLT 声明式、标准化的优势 | 大多数现代 Web 项目 |
4. 实用小技巧（2025 年还在用的人必备）
- 强制浏览器显示为 HTML 而不是原始 XML：
<xsl:output method="html" encoding="UTF-8" indent="yes"/>- 让转换结果可复制、可打印：
<xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01//EN"/>- 调试技巧：在 XSL 里临时加
<xsl:message>（Firefox 会显示在控制台）
总结：2025 年还要不要在客户端用 XSLT？
| 场景 | 推荐程度 | 理由 |
|---|---|---|
| 纯静态文档系统（技术手册、离线报表） | 5 stars | 无敌方案，几乎零成本 |
| 政府/银行合规系统（必须用标准 XSLT） | 5 stars | 唯一选择 |
| 普通 Web 应用 | 1 star | 基本没人用了 |
| 需要 XSLT 3.0 功能 | 3 stars | 用 Saxon-JS |
如果你现在就想试试最简单的方式，直接新建两个文件：
- books.xml（加
<?xml-stylesheet?>那行） - books.xsl（输出完整的
<html>）
然后双击 books.xml，浏览器自动给你一个美观的网页——这才是 XSLT 当年“XML + XSL = 网页”的原始梦想，至今仍然有效！
需要我给你一个完整的可直接运行的例子吗？（包含响应式表格、图片、CSS）
