Импорт данных в html форму

[PShim]

Добрый день!
Есть небольшой вопрос связанный с импортом данных в html форму. Постановка задачи такова: есть html форма которая в дальнейшем отправляется на печать, в определенные пункты этой форму нужно импортировать данные из внешнего файла (excel например). Каким образом можно производить передачу данных? Как сделать это по тегово? Какие есть бесплатные библиотеки по js для формирования отчетов?

[Switch74]

если html форма имеет формат (и ни как не связана с php)

<form>
...
<input name="col1">
<input name="col2">
....
</form>

а xls выглядит на вроде
 col1 | col2  
text1 | text2
то можно через js запрашивать с сервера информацию xls файла разбирать данные и вставлять из колонки 'col1' в value input c name="col1" 'text1'.
для работы c xls в php можно использовать библиотеку PHPExcel, о ее работе можно почитать здесь https://habr.com/ru/post/245233/

если есть возможность, то я бы посоветовал перенести формирование формы в php и сразу в этот момент можно было бы заполнять ее данными из xls

[PShim]

А пример когда для локального excel с помощью обращения к нему на js можете скинуть?

Edited January 30, 2019 by PShim

[Switch74]

если вы файл берете не с сервера, то лучше импортировать в другом формате, например csv или xml
дальше выбрав его через <input type="file"> получить доступ к его содержимому в этом вам поможет
https://developer.mozilla.org/ru/docs/Web/API/FileReader
и заполнять форму данными

[PShim]

Простите, не могу понять все равно как. Без примера не разберусь.

html:
<td><input type="file" id="input"></td>

js:

var fileInput = document.querySelector('input[type="file"]');

function read(callback) {

var file = fileInput.files.item(0);

var reader = new FileReader();

reader.onload = function() {

callback(reader.result);

}

reader.readAsText(file);

}

 

Все же прошу помочь как с написанием кода/примером

По факту у меня имеется таблица в html в нее нужно внести определенные данные из csv файла.

Edited January 30, 2019 by PShim

[Switch74]

https://jsfiddle.net/mouwzb96/1/

[PShim]

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

[PShim]

Еще раз здравствуйте. Я все же не могу разобраться с js. Если можете помогите кодом. Есть csv файл, имеющий в себе конструкцию  id| num   и имеется html таблица в которую нужно вывести значения id, num

                                                            21| 45

в определенные секции этой таблицы. Как нужно правильно обратиться к элементам файла csv и вывести в определенные пункты таблицы в html. Помогите кодом!

Edited January 31, 2019 by PShim

[Switch74]

а как можно не правильно обратиться к строкам csv?
какая связь должна быть у "определенных" пунктов в таблице с данными в csv чтобы однозначно понять что именно эти данные должны быть вставлены в конкретную ячейку?

[PShim]

Правильно это когда не знаешь синтаксиса в js. Связь данных csv и таблицы html чисто прикладная. Я понимаю как можно с помощью генератора и работы с json на python сделать подобную работу. Но никак не могу вникнуть, как можно сделать это все на js. Поэтому ищу помощь на этом форуме. 
Связь между данными можно определить как в словаре. {kye:value} и прописать в ручную для каждого значения сначала в js все значения присвоив им переменные, которые в дальнейшем можно вывести в html таблицу в требуемые места по заданию

[Switch74]

связь то какая?
вот есть у вас csv

Цитата

1;1
2;2
3;3

есть таблица

<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

как определить куда вставлять 1, куда 2, куда 3?

[PShim]

speed;1
weigth;2
tall;3
age;18

 

Если примерно сделать так, то как будет выглядеть код? Вы уроки по js не даете?

<table>
<tr>1<td></td><td></td></tr>
<tr><td></td><td>2</td></tr>
<tr><td></td><td>18</td>3</tr>
</table>

[Switch74]

1. первая колонка из csv у вас не вставляется и является ключом
2. туда куда вы вставили 1 и 3 нельзя вставлять данные
предположу, что вам нужно
https://jsfiddle.net/9bzwpmya/

[PShim]

почему то не выводит данные по этому файлу 

 

MOCK_DATA.csv

Edited January 31, 2019 by PShim

[Switch74]

так сделано под

Цитата

speed;1
weigth;2
tall;3
age;18

а у вас в файле
speed;weigth;tall;age
1;2;3;18
в вашем случае нужно первую строку использовать для создания ключей массива
а вторую значений

[PShim]

Все равно не выводит

MOCK_DATA.csv

[Switch74]

а зачем кавычки в csv?

[PShim]

Какие кавычки?

[Switch74]

"speed;1"
"weigth;2"
"tall;3"
"age;18?"

[PShim]

все равно ничего не выдает 

https://jsfiddle.net/9bzwpmya/

Edited January 31, 2019 by PShim

[Switch74]

у меня выдает, приведите csv файл в порядок

 

[PShim]

MOCK_DATA.csv

так ведь

[Switch74]

:) там кавычек в 3 раза больше стало

[PShim]

Можете скинуть готовый файл? ))

[Switch74]

а что мешает вам его сделать самому, например в том же Excel?
 

MOCK_DATA.csv

[PShim]

Просто не понимал что не так делал