JavaScript如何解析本地xml文件

項目功能

本地解析

上傳文件

<input class="input" ref="file" type="file" @change="handleFileChange" />       
複製代碼

解析file對象

獲取file對象，獲取到本地url路徑地址

// 獲取本地上傳文件路徑
const getUploadUrl = function(flie) {
    let url = "";
    if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(flie);
    } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(flie);
    } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(flie);
    }
    return url; // 返回這樣的一串地址 blob:http://www.xxxx.com/2c230fa5-ecc4-4314-ae7c-c39eaa66a945
};
複製代碼

解析文件，得到xml對象

const loadXML = function(xmlFile) {
    var xmlDom = null;
    if (window.ActiveXObject) {
        xmlDom = new ActiveXObject("Microsoft.XMLDOM");
        xmlDom.async = "false";
        xmlDom.load(xmlFile);
    } else if (
        document.implementation &&
        document.implementation.createDocument
    ) {
        var xmlhttp = new window.XMLHttpRequest();
        xmlhttp.open("GET", xmlFile, false);
        xmlhttp.send(null);
        xmlDom = xmlhttp.responseXML;
    } else {
        xmlDom = null;
    }
    return xmlDom; // 返回的是一個doucument的對象
};
複製代碼

document對象轉字符串

let url = getUploadUrl(file); // 文件對象
let xml = loadXML(url);
let text = new XMLSerializer().serializeToString(xml) // 將text賦值給textarea闊以了

// 賦值文本框
var element = document.getElementById('textarea');
element.value  = text 
複製代碼

會出現亂碼

解決亂碼

使用 notepat++ 將文件打開，轉換成UTF-8編碼格式，而後另存爲一份新的文件