时间戳

首页 > 解决方案 > XSTLProcessor 绕过和标记

javascript - XSTLProcessor 绕过和标记

问题描述

我在客户端有一个 XML 和 XSL 文件，并希望将其转换为 HTMLElement，以便可以附加到当前元素

但结果与我预期的相差甚远。<td>除了 HtmlElement 结果中排除了and<tr>标记之外，一切似乎都很好

我的 XML 文件

<?xml version="1.0" encoding="UTF-8"?>
<ns1:Courses xmlns:ns1="www.Course.com">
    <ns1:Course xmlns:ns1="www.Course.com">
        <ns1:Id>2153</ns1:Id>
        <ns1:Name>7 bước làm sao tận hưởng một chuyến du lịch nước ngoài với chi phí thấp</ns1:Name>
        <ns1:Author>Hoàng Lê Giang</ns1:Author>
        <ns1:AuthorImageURL>
            d1nzpkv5wwh1xf.cloudfront.net/320/k-57b67d6f60af25054a055b25/20170928-gianghl_2809/gianghl01.jpg
        </ns1:AuthorImageURL>
        <ns1:Rating>0.0</ns1:Rating>
        <ns1:RatingNumber>0</ns1:RatingNumber>
        <ns1:Cost>599000.0</ns1:Cost>
    </ns1:Course>

我的 XSL 文件 

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" encoding="UTF-8" indent="yes" media-type="text/html"/>
    <xsl:template match="/">

        <xsl:for-each select="//*[local-name()='Course']">
            <tr>
                <td class="col1">
                    <div class="course_name">
                        <a href="{*[local-name()='SourceURL']}">
                            <xsl:value-of select="*[local-name()='Name']"/>
                        </a>

                    </div>
                    <div class="course_small_detail">

                        <img class="img_author_small"
                             src="{*[local-name()='AuthorImageURL']}"/>
                        <span class="author_name">
                            <xsl:value-of select="*[local-name()='Author']"/>
                        </span>

                    </div>


                </td>

                <td class="col2">
                    <xsl:value-of select="*[local-name()='Cost']"/>
                </td>
                <td class="col3">
                    <xsl:value-of select="*[local-name()='Rating']"/>
                </td>
            </tr>
        </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

我用于转换和附加结果的 javascript 代码

var xmlDoc = xmlHttp.responseXML;
            var xslDoc = xslHttp.responseXML;

            xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xslDoc);

            //used to add to html document
            var resultDocument = xsltProcessor.transformToFragment(xmlDoc, document);
            console.log(resultDocument);
            document.getElementById("xmlResult").appendChild(resultDocument);

我的 html 结果渲染 

 <table class="table_result">
                    <thead>
                    <tr>
                        <th>header1 </th>

                        <th>header2 </th>
                        <th>header3 </th>
                    </tr>
                    </thead>
                    <tbody id="xmlResult">
                    </tbody>
</table>

我相信这是因为我用来转换的 XSLTProcessor，因为我尝试用我的 IDE 的 XSLT 工具对其进行转换，结果完全正确

标签： javascripthtmlxmlxslttransformation

解决方案

在 Windows 10 1803 上使用当前版本的 Firefox、Chrome 和 Edge，我可以让 XSLT 返回一个带有 XHTMLtr元素的片段，然后将其插入到托管 HTML 文档和一个tbody：

var domParser = new DOMParser();

var xmlString = `<root>
  <item>
    <value>foo 1<\/value>
    <value>foo 2<\/value>
    <value>foo 3<\/value>
  <\/item>
  <item>    
    <value>bar 1<\/value>
    <value>bar 2<\/value>
    <value>bar 3<\/value>
  <\/item>
<\/root>`;

var xslString = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns="http://www.w3.org/1999/xhtml">
  <xsl:output method="xml" indent="yes"/>
  
  <xsl:template match="item">
    <tr>
      <xsl:apply-templates/>
   <\/tr>
 <\/xsl:template>
 
 <xsl:template match="value">
   <td>
     <xsl:apply-templates/>
   <\/td>
 <\/xsl:template>
 
<\/xsl:stylesheet>`;

var xmlInputDoc = domParser.parseFromString(xmlString, 'application/xml');

var xsltDoc = domParser.parseFromString(xslString, 'application/xml');

var xsltProc = new XSLTProcessor();
xsltProc.importStylesheet(xsltDoc);

var fragment = xsltProc.transformToFragment(xmlInputDoc, document);

console.log(fragment);

var table = document.getElementById('table1');

var tBody = document.getElementById('xmlResult');

tBody.appendChild(fragment);
<table id="table1" class="table_result">
                    <thead>
                    <tr>
                        <th>header1 </th>

                        <th>header2 </th>
                        <th>header3 </th>
                    </tr>
                    </thead>
                    <tbody id="xmlResult">
                    </tbody>
</table>

推荐阅读