Вывод XML файла в textarea

@lRedle · Регистрация: 15.03.2023

Студворк — интернет-сервис помощи студентам

Выбираю локально файл xml и вывожу его в textarea. Некорректно выводит символы кириллицы. Как можно исправить данную проблему?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="Windows-1251">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <title>XML</title>
</head>
<body>
    <input type="file" name="svg">
    <textarea class="target" cols="30" rows="10"></textarea>
    <script src="index.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
const input = document.querySelector("input");
let file;
 
const target = document.querySelector(".target");
 
input.addEventListener("change", async e => {
  file = e.target.files[0];
  target.innerHTML = await file.text();
});

CSS
1
2
3
4
5
6
7
8
.target {
    width: 300px;
    min-height: 100px;
    border: 2px solid #000;
    margin-top: 20px;
    background-color: #a7a5a5;
    font-family:arial;
  }

krvsa · 14.02.2024, 09:51

Сообщение от lRedle

Некорректно выводит символы кириллицы. Как можно исправить данную проблему?

А если взять пример из букваря?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input type="file" onchange="readFile(this)">
 
<script>
function readFile(input) {
  let file = input.files[0];
 
  let reader = new FileReader();
 
  reader.readAsText(file);
 
  reader.onload = function() {
    console.log(reader.result);
  };
 
  reader.onerror = function() {
    console.log(reader.error);
  };
 
}
</script>

https://learn.javascript.ru/file#filereader

Там у readAsText(blob, [encoding]) можно указывать кодировку.

@lRedle · 14.02.2024, 14:14 **[ТС]**

krvsa, получаю файл и пытаюсь его распарсить, выводя в textarea нужный мне фрагмент xml

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="Windows-1251">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>XMLLoad</title>
</head>
<body>
<input type="file" onchange="readFile(this)">
<textarea class="target" cols="80" rows="10" id="target"></textarea>  
<script src="index.js"></script> 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function readFile(input) {
    let file = input.files[0];
    let reader = new FileReader();
    reader.readAsText(file, "Windows-1251");
    var parser, xmlDoc;
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(file, "text/xml");
    document.getElementById("target").innerHTML = xmlDoc.getElementsByTagName("Product")[0].childNodes[0].nodeValue;
   
    reader.onload = function() {
        console.log(reader.result);
    };
 
    reader.onerror = function() {
        console.log(reader.error)
    };
}

Но в консоль вылетает ошибка. Пытаюсь спарсить впервые, не понимаю в чем ошибка, в интернет статьях у людей все нормально... Что я делаю не так?

xmlTest.zip

@voraa · 14.02.2024, 15:11

Чтение файла - асинхронная операция. Надо ждать пока она не закочится
Так пробуйте

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function read (file) {
    return new Promise((res, rej) => {
        let reader = new FileReader();
        reader.onload = () => res(reader.result)
        reader.onerror = () => rej (new Error('read error'))
        reader.readAsText(file, "Windows-1251");
    })
}
 
async function readFile(input) {
    let file = input.files[0];
    const xmlstr = await read(file);
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlstr, "application/xml");
    document.getElementById("target").innerHTML = xmlDoc.getElementsByTagName("Product")[0].childNodes[0].nodeValue;
}

@lRedle · 14.02.2024, 15:25 **[ТС]**

voraa, понял, спасибо! А что бы вывести в textarea все тэги "Product", это получается нужен цикл.
Что-то вроде

JavaScript
1
2
3
4
5
6
7
8
9
sync function readFile(input) {
    for (?) {
    let file = input.files[0];
    const xmlstr = await read(file);
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlstr, "application/xml");
    document.getElementById("target").innerHTML = xmlDoc.getElementsByTagName("Product")[0].childNodes[0].nodeValue;
}
}

только как указать в условии что цикл будет срабатывать пока не пробежит весь xml?

@voraa · 14.02.2024, 15:51

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function readFile(input) {
    const file = input.files[0];
    const xmlstr = await read(file);
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(
        xmlstr,
        'application/xml'
    );
    const products = xmlDoc.querySelectorAll('Product');
    let sv = '';
    for (const product of products) {
        sv += product.childNodes[0].nodeValue + '\n';
    }
    document.getElementById('target').innerHTML = sv;
}

@lRedle · 14.02.2024, 16:26 **[ТС]**

voraa, Вроде разобрался, спасибо большое! Но я так понял в случае если нужно вытягивать два тэга из xml и сцеплять их между собой, по типу: имя + количество -> новая строка и так далее. Если пробегаю все тэги в своем цикле, то он их и выводит сначала один тэг все строки, потом другой тэг все строки, но сцепить их между собой не получится так

@voraa · 14.02.2024, 17:09

Ну почему. У вас там все это находится внутри <line>
Ищете все <Line>, проходите по ним в цикле и в каждой ищете <Product>. <Quantity>, <Amount>....

JavaScript
1
2
3
4
5
6
7
const lines = xmlDoc.querySelectorAll('Line');
for (const line of lines) {
    const product = line.querySelector('Product');  
    const quantity = line.querySelector('Quantity');    
    const amount = line.querySelector('Amount');
    // Тут делаете с ними что хотите
}

@lRedle · 15.02.2024, 09:47 **[ТС]**

voraa, что-то парсинг мне вообще не дается. Мало информации в сети. Пытаюсь полученные с Вашей помощью строки вывести в некое подобие таблицы

На забугорном сайте нашёл пример, пытаюсь разобраться, и вроде выводит, но выводи какой-то бред

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
function read (file) {
    return new Promise((res, rej) => {
        let reader = new FileReader();
        reader.onload = () => res(reader.result)
        reader.onerror = () => rej (new Error('read error'))
        reader.readAsText(file, "Windows-1251");
    })
}
async function readFile(input) {
    const file = input.files[0];
    const xmlstr = await read(file);
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlstr,'application/xml');
    const lines = xmlDoc.querySelectorAll('Line');
 
    for (const line of lines) {
    const product = line.querySelector('Product');  
    const quantity = line.querySelector('Quantity'); 
    const etm = line.querySelector('ETM_data_000');  
    console.log(product);
    console.log(quantity); 
    console.log(etm);
    }
 
    table = document.createElement('table');
 
    
    var pars = xmlDoc.getElementsByTagName('Product');
    for (var i = 0, l = pars.length; i < l; i++) {
        var par = pars[i];
        var tr = table.insertRow();
        var td = tr.insertCell();
        td.innerHTML = par.getAttribute('Product');
        td.colSpan = '2';
        td.innerHTML = par.innerHTML;
 
        var quats = xmlDoc.getElementsByTagName('Quantity');
        for (var j = 0, k = quats.length; j < k; j++) {
            var quat = quats[i];
            var tr = table.insertRow();
            var td = tr.insertCell();
            td.innerHTML = quat.getAttribute('Quantity');
            td.colSpan = '2';
            td.innerHTML = quat.innerHTML;
 
            var etms = xmlDoc.getElementsByTagName('ETM_data_000')
            for (var q = 0, r = etms.length; q < r; q++){
                var etm = etms[i];
                tr = table.insertRow();
                td = tr.insertCell();
                td.innerHTML = etm.getAttribute('ETM_data_000');
                td.colSpan = '2';
                td.innerHTML = quat.innerHTML;
            }
        }
    }
    document.body.appendChild(table);
}

@lRedle · 15.02.2024, 15:17 **[ТС]**

Поправил вывод до состояния более менее читаемым, но не пойму как теперь разделить на столбцы эти строки

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function read (file) {
    return new Promise((res, rej) => {
        let reader = new FileReader();
        reader.onload = () => res(reader.result)
        reader.onerror = () => rej (new Error('read error'))
        reader.readAsText(file, "Windows-1251");
    })
}
async function readFile(input) {
    const file = input.files[0];
    const xmlstr = await read(file);
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlstr,'application/xml');
    const lines = xmlDoc.querySelectorAll('Line');
   
 table = document.createElement('table');
    var pars = xmlDoc.getElementsByTagName('Product');
    for (var i = 0, l = pars.length; i < l; i++) {
        var par = pars[i];
        td = table.insertRow();
        tr = td.insertCell();
        tr.innerHTML = par.getAttribute('Product');
        tr.colSpan = '0';
        tr.innerHTML = par.innerHTML;
        document.body.appendChild(table);
 
    }
 tr2 = document.createElement('tr');
    var quats = xmlDoc.getElementsByTagName('Quantity');
        for (var j = 0, k = quats.length; j < k; j++) {
            var quat = quats[j];
            td = table.insertRow();
            tr2 = td.insertCell();
            tr2.innerHTML = quat.getAttribute('Quantity');
            tr2.colSpan = '0';
            tr2.innerHTML = quat.innerHTML;
            document.body.appendChild(table);
 
        }
 td3 = document.createElement('td');
            var etms = xmlDoc.getElementsByTagName('ETM_data_000')
            for (var q = 0, r = etms.length; q < r; q++){
                var etm = etms[q];
                td3 = table.insertRow();
                tr = td3.insertCell();
                tr.innerHTML = etm.getAttribute('ETM_data_000');
                tr.colSpan = '0';
                tr.innerHTML = etm.innerHTML;
                document.body.appendChild(table);
 
            }
        }

@voraa · 15.02.2024, 17:48

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="Windows-1251" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css" />
        <title>XMLLoad</title>
        <style>
            table {
                width: 80%;
                margin-inline: auto;
                border: 1px solid black;
                border-spacing: 0;
            }
            th, td {
                border: 1px solid black;
            }
            :is(td,th):is(:nth-child(2),:nth-child(3)) {
                text-align: center;
            }
 
            th {
                background-color: #ccc;
            }
 
        </style>
    </head>
    <body>
        <input type="file" onchange="readFile(this)" /><br>
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>ETM_data_000</th>
                </tr>
            </thead>
            <tbody>               
            </tbody>
        </table>
        <script>
            function read(file) {
                return new Promise((res, rej) => {
                    let reader = new FileReader();
                    reader.onload = () => res(reader.result);
                    reader.onerror = () => rej(new Error('read error'));
                    reader.readAsText(file, 'Windows-1251');
                });
            }
 
            async function readFile(input) {
                let file = input.files[0];
                const xmlstr = await read(file);
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(
                    xmlstr,
                    'application/xml'
                );
 
                const tbody = document.querySelector('table').tBodies[0];
                const lines = xmlDoc.querySelectorAll('Line');
                for (line of lines) {
                    const tr = tbody.insertRow();
                    const product = line.querySelector('Product');  
                    const quantity = line.querySelector('Quantity');    
                    const emtdata000 = line.querySelector('ETM_data_000'); 
                    tr.insertCell().textContent = product.textContent;     
                    tr.insertCell().textContent = quantity.textContent;     
                    tr.insertCell().textContent = emtdata000.textContent;     
                }
            }
        </script>
    </body>
</html>

@lRedle · 16.02.2024, 07:58 **[ТС]**

voraa, Как же сильно я всё делал не так

Большое спасибо!

@lRedle · 18.02.2024, 11:18 **[ТС]**

voraa, Вопрос уже наверное не в тему будет, но можно ли такую таблицу потом собрать в JSON? Или как-то проще это можно делать, не по таблицы а в моменте парсинга как-то собирать?

@voraa · 18.02.2024, 11:31

Конечно можно. Сначала создается объект со всеми необходимыми свойствами, а потом JSON.stringify()

@lRedle · 21.02.2024, 14:04 **[ТС]**

voraa, почитал, додумался до следующей конструкции:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function tableToJson() {
    let js = [];
    let table = document.getElementById("table").getElementsByTagName("thead")[0];
    let trs = table.getElementsByTagName("tr");
    for (let i = 2; i < trs.length; i++) {
        let tds = trs[i].getElementsByTagName("td");
        let line = {};
        line.product = tds[0].innerHTML;
        line.quantity = tds[1].innerHTML;
        line.emtdata000 = tds[2].innerHTML;
        js.push(line);
    }
    return JSON.stringify(js);
}

Ошибок не выдает, но не понимаю, как можно этот JSON вывести в скажем файлик. Хочу посмотреть что-получилось, и не понимаю где и как посмотреть

@voraa · 21.02.2024, 14:32

Js не имеет самостоятельного доступа к файловой системе. В принципе выводить в файл можно, но каждый раз будет запрашивать, в какой файл сохранять результат.
Такую конструкцию можно использовать

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function saveString (str, filename) {
    const blob = new Blob([str], { type: 'text/plain' });
    const bloburl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.download = filename;
    a.href = bloburl;
    a.click();
    window.URL.revokeObjectURL(bloburl);
}
 
let s ="Сохранить в файл эту строку";
 
saveString (s, 'file.txt')

Ну или просто в консоль выводить.

По коду.
Вы только header хотите сохранить?
Или всю таблицу с заголовком?
Или только тело таблицы

krvsa · 21.02.2024, 14:33

Сообщение от lRedle

JavaScript
1
2
3
4
let line = {};
line.product = tds[0].innerHTML;
line.quantity = tds[1].innerHTML;
line.emtdata000 = tds[2].innerHTML;

JavaScript
1
2
3
4
5
const line = {
        product: tds[0].innerHTML,
        quantity: tds[1].innerHTML,
        emtdata000: tds[2].innerHTML
}

@lRedle · 21.02.2024, 16:31 **[ТС]**

voraa, то, что он будет постоянно спрашивать куда сохранять, это нормально. Вообще задумка такая, что из XML файла парсится таблица, потом возле каждого поля таблицы может каким-то чекбоксом или еще чем-то буду выделять нужные поля и при нажатии на кнопку выделенные поля будут сохранятся в json. Но это потом почитаю, поучу как это реализовать, мне сейчас бы понять как вообще можно все строки таблицы, кроме шапки, записать в json. Я вроде написал что-то, это "что-то" ошибок не выдало, или это я не знаю где посмотреть их, еще совсем глуп в js и в целом в этом ремесле. Вот хочу посмотреть, а вообще мой код срабатывает, и я получаю все строки таблицы в формате json

Добавлено через 1 час 35 минут
Получилось следующее:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function tableToJson() {
   // let js = [];
    let table = document.getElementById("table").getElementsByTagName("thead")[0];
    let trs = table.getElementsByTagName("tr");
    for (let i = 2; i < trs.length; i++) {
        let tds = trs[i].getElementsByTagName("td");
        const line = {
            product: tds[0].innerHTML,
            quantity: tds[1].innerHTML,
            emtdata000: tds[2].innerHTML
        };
        const jsonString = JSON.stringify(line);
        const blob = new Blob([line], {type: 'application/json'});
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = "data.json";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    }
}

Но почему то сслыка не срабатывает, загрузка не начинается. Скрипт вызывается в конце страницы, перед закрытие тега body, а скрипт с парсингом xml в таблицу в head. И в сети вычетал что в конце нужно отзывать ссылку у созданного link, но не понял, это обязательно или нет

@voraa · 21.02.2024, 17:32

У меня

JavaScript
1
const blob = new Blob([str], { type: 'text/plain' });

str - сама строка, которую надо вывести.
А у вас что?

JavaScript
1
2
3
document.body.appendChild(link);
....
document.body.removeChild(link);

В принципе не обязательно. Работает и без этого. По крайней мере в Хроме и Файрфоксе. В Сафари, по бедности, не проверял.
Но можно и оставить на всякий пожарный.

Сообщение от lRedle

мне сейчас бы понять как вообще можно все строки таблицы, кроме шапки, записать в json.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function tableToJson() {
    let tbody = document.getElementById("table").tBodies[0];
    let rows = tbody.rows;
    const arr = []
    for (const row of rows) {
        let cells = row.cells;
        const line = {
            product: cells[0].textContent,
            quantity: cells[1].textContent,
            emtdata000: cells[2].textContent
        };
        arr.push(line)
    }
    const jsonString = JSON.stringify(arr, 0, 4);
    const blob = new Blob([jsonString], {type: 'application/json'});
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = "data.json";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}
 
tableToJson()

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

Вывод XML файла в textarea

Решение

Решение

Решение

@lRedle 1 / 1 / 1 Регистрация: 15.03.2023 Сообщений: 110
	14.02.2024, 16:26 [ТС]
	voraa, Вроде разобрался, спасибо большое! Но я так понял в случае если нужно вытягивать два тэга из xml и сцеплять их между собой, по типу: имя + количество -> новая строка и так далее. Если пробегаю все тэги в своем цикле, то он их и выводит сначала один тэг все строки, потом другой тэг все строки, но сцепить их между собой не получится так 0

@lRedle 1 / 1 / 1 Регистрация: 15.03.2023 Сообщений: 110
	16.02.2024, 07:58 [ТС]
	voraa, Как же сильно я всё делал не так Большое спасибо! 0

@lRedle 1 / 1 / 1 Регистрация: 15.03.2023 Сообщений: 110
	18.02.2024, 11:18 [ТС]
	voraa, Вопрос уже наверное не в тему будет, но можно ли такую таблицу потом собрать в JSON? Или как-то проще это можно делать, не по таблицы а в моменте парсинга как-то собирать? 0

@voraa 1242 / 1142 / 178 Регистрация: 21.01.2024 Сообщений: 5,238
	18.02.2024, 11:31
	Конечно можно. Сначала создается объект со всеми необходимыми свойствами, а потом JSON.stringify() 0