Вывод 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()

Новые блоги и статьи Все статьи Все блоги /
BOINC: 22 года — и всё ещё работает Programma_Boinc 12.03.2026 BOINC: 22 года — и всё ещё работает Дэвид Андерсон написал ретроспективу. Кратко: в 2001 году он ушёл из United Devices, где был CTO, и за несколько месяцев написал ядро BOINC — клиент, сервер,. . .	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

Вывод 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 1276 / 1242 / 185 Регистрация: 21.01.2024 Сообщений: 5,738
	18.02.2024, 11:31
	Конечно можно. Сначала создается объект со всеми необходимыми свойствами, а потом JSON.stringify() 0