使用xslt样式表将xml转换为html

时间:2020-10-24 03:14:17

标签: javascript xml xslt ecmascript-6

我有一个示例XMLXSL资源。我从JavaScript中的API调用中获得了XML作为字符串。 XSLT在服务器上作为静态资源存在。我的目标是在HTML文档元素中显示XML内容以及样式表。

我暂时不想使用XSLTProcessor。我想尝试浏览器方式。是的,XMLXSLT都将来自同一服务器。

代码:

import XSL from '@salesforce/resourceUrl/Roles';

export default class DisplayReport extends LightningElement {

    renderedCallback(){
        var xml = '<root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>'; 
        
        var output = '<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="'+XSL+'" ?>'+xml;
        console.log(output); //output on below line
        
        //<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="/assets/project/b481ca5a6f/staticresources/Roles" ?><root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>
        
        var xmlNode = this.parseXml(output);        
        console.log(xmlNode);
        const element = this.template.querySelector('div.dms');
        element.appendChild(xmlNode.documentElement);
    }

    parseXml(xmlStr){
        if (window.DOMParser) {
            return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
        }
    }
}

标记:

<template>
    <div class="dms" lwc:dom="manual">

    </div>
</template>

输出:(不应用样式表)

one 1 2 two

有什么想法吗?

0 个答案:

没有答案
相关问题