引言
有時我們想看下系統生成的XML文件（如XML格式的Project文件），如果文件結構簡單，我們瀏覽器看起來還比較方便，但是隨着XML schema復雜后就變得讓人頭疼啦，單獨寫一個程序去做展現又有點小題大做。這時XSL就用體現它的價值啦，當然XSL不只是為了顯示，更多的目的是從一個格式生成另個一格式的XML或者其他格式的文件。本文只說說格式化。
過程中遇到的問題解決方法
效果圖
XSL常用元素
xsl:template定義匹配節點的轉換模板,屬性match=”xpath expression”用來定義模板匹配的元素
如下定義匹配根節點的模板
<xsl:template match=”/”> </xsl:template>
xsl:for-each循環顯示select=”xpath expression”選擇節點的轉換 (類似編程語言中的foreach語句),
如下示例,選擇了pets下面的子元素，並循環顯示子元素的幾點名字：
<xsl:for-each select=”/pets/*”> <xsl:value-of select=”name()”/> </xsl:for-each>
xsl:if 元素條件顯示節點（類似編程語言中的if語句）注意小於號大於號要分別用<和>替代
<xsl:if test=”@weight < 10”> <i>its weight is less than 10 km</i> </xsl:if>
xsl:choose 多分支條件顯示 （類似編程語言中的switch語句）
<xsl:choose > <xsl:when test=”name() = ‘pig’”> <i>this is a pig</i> </xsl:when> <xsl:otherwise> <i>this is not a pig</i> </xsl:otherwise> </xsl:choose>
xsl:value-of 顯示選擇節點或者屬性的值
選擇子節點price
<xsl:value-of select=”pets/*/price”/>
選擇屬性weight
<xsl:value-of select=”pets/*/@weight”/>
xsl:attribute 構造xml節點的屬性
用來向節點添加屬性，例如：
<font> <xsl:attribute name=”color”><xsl:value-of select=”pets/*/@color”/></xsl:attribute> </font>
將輸出<font color=”red”></font>
xsl:apply-templates 應用模板
如果xml文件結構比較復雜，可以定義多個template，然后使用<xsl:apply-templates>標簽應用模板，xsl:apply-templates 可以指定屬性select=”xpath”來選擇應用的模板，或者不指定select表示選擇當前節點的模板。
XSL所有元素
| 元素 | 描述 | IE | N |
|---|---|---|---|
| apply-imports | 應用來自導入樣式表中的模版規則。 | 6.0 | |
| apply-templates | 向當前元素或當前元素的子元素應用模板。 | 5.0 | 6.0 |
| attribute | 向元素添加屬性。 | 5.0 | 6.0 |
| attribute-set | 創建命名的屬性集。 | 6.0 | 6.0 |
| call-template | 調用一個指定的模板。 | 6.0 | 6.0 |
| choose | 與<when>以及<otherwise>協同使用，來表達多重條件測試。 | 5.0 | 6.0 |
| comment | 在結果樹中創建注釋節點。 | 5.0 | 6.0 |
| copy | 創建當前節點的一個備份（無子節點及屬性）。 | 5.0 | 6.0 |
| copy-of | 創建當前節點的一個備份（帶有子節點及屬性）。 | 6.0 | 6.0 |
| decimal-format | 定義當通過 format-number() 函數把數字轉換為字符串時，所要使用的字符和符號。 | 6.0 | |
| element | 在輸出文檔中創建一個元素節點。 | 5.0 | 6.0 |
| fallback | 假如處理器不支持某個XSLT元素，規定一段備用代碼來運行。 | 6.0 | |
| for-each | 遍歷指定的節點集中的每個節點。 | 5.0 | 6.0 |
| if | 包含一個模板，僅當某個指定的條件成立時應用此模板。 | 5.0 | 6.0 |
| import | 用於把一個樣式表中的內容倒入另一個樣式表中。 | 6.0 | 6.0 |
| include | 把一個樣式表中的內容包含到另一個樣式表中。 | 6.0 | 6.0 |
| key | 聲明一個命名的鍵。 | 6.0 | 6.0 |
| message | 向輸出寫一條消息（用於錯誤報告）。 | 6.0 | 6.0 |
| namespace-alias | 把樣式表中的命名空間替換為輸出中不同的命名空間。 | 6.0 | |
| number | 測定當前節點的整數位置，並對數字進行格式化。 | 6.0 | 6.0 |
| otherwise | 規定 <choose> 元素的默認動作。 | 5.0 | 6.0 |
| output | 定義輸出文檔的格式。 | 6.0 | 6.0 |
| param | 聲明一個局部或全局參數。 | 6.0 | 6.0 |
| preserve-space | 用於定義保留空白的元素。 | 6.0 | 6.0 |
| processing-instruction | 生成處理指令節點。 | 5.0 | 6.0 |
| sort | 對結果進行排序。 | 6.0 | 6.0 |
| strip-space | 定義應當刪除空白字符的元素。 | 6.0 | 6.0 |
| stylesheet | 定義樣式表的根元素。 | 5.0 | 6.0 |
| template | 當指定的節點被匹配時所應用的規則。 | 5.0 | 6.0 |
| text | 通過樣式表生成文本節點。 | 5.0 | 6.0 |
| transform | 定義樣式表的根元素。 | 6.0 | 6.0 |
| value-of | 提取選定節點的值。 | 5.0 | 6.0 |
| variable | 聲明局部或者全局的變量。 | 6.0 | 6.0 |
| when | 規定 <choose> 元素的動作。 | 5.0 | 6.0 |
| with-param | 規定需被傳入某個模板的參數的值。 | 6.0 | 6.0 |
XSL引入方式
IE瀏覽器支持直接在XML中直接引入XSL文件
<?xml-stylesheet type="text/xsl" href="icoreNested.xsl"?>
Chorme瀏覽器不能直接加載本地XSL文件
參考Can Chrome be made to perform an XSL transform on a local file
<html>
<head>
<script>
function loadXMLDoc(filename)
{
var progressBar = document.getElementById("p");
if (window.ActiveXObject)
{
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);//Synchronous loadXMLDoc
try {
xhttp.onprogress = function(pe) {
if(pe.lengthComputable) {
progressBar.max = pe.total
progressBar.value = pe.loaded
}
}
xhttp.onloadend = function(pe) {
progressBar.value = pe.loaded
}
} catch(err) {} // Helping IE11
xhttp.send();
return xhttp.responseXML;
}
function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
{
ex = xml.transformNode(xsl);
document.getElementById("example").innerHTML = ex;
}
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<h2>Content as Follow:</h2>
<progress id=p style="width=100%"></progress>
<div id="example" />
</body>
</html>
源碼
參考
Can Chrome be made to perform an XSL transform on a local file?