xml to html

js實現xml轉html

2020年註定不在平凡,武漢疫情的爆發,科比的遇難。大家都閉門不出,心中渴望2020年能否重來。
在家的我都快生鏽,時不時學點東西,今天就更新一篇關於 xml DOM的文章。
我得到一系列的xml文件,它們是長這樣:

在這裏插入圖片描述
分析過程就不多說了,我需要做的事情是把 Line 標籤裏 LintText內容拿出來。然後用js將內容拼接起來,轉化成html。給大家看下js代碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ICU病程記錄</title>
</head>

<body>
    <script>
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if (xmlhttp) {
            xmlhttp.open("GET", "./ICU病程記錄.xml", false);
            xmlhttp.send(null);
            xmlDoc = xmlhttp.responseXML;

            document.write("<table border='1'>");

            var x = xmlDoc.getElementsByTagName("Line");


            for (i = 0; i < x.length; i++) {

                let htm = x[i].getAttribute("LineText");
                if (htm) {
                    document.write("<tr><td>");
                    document.write(htm);
                    document.write("</td></tr>");
                }

            }
            document.write("</table>");
        }
    </script>
</body>

</html>

大家肯定想知道關於 XMLHttpRequest 對象的,這裏我就不多說了,比較網上搜索一堆,解釋的也比較專業,在此我強調一點,在本地使用,瀏覽器訪問會出現跨域的情況。大家可以使用nginx或者node的http.server或者python的 python -m http.server來解決。希望大家身體健康,疫情過後都直奔健身房。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章