PShim

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

если 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

Share this post


Link to post
Share on other sites

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

Edited by PShim

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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 by PShim

Share this post


Link to post
Share on other sites

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

                                                            21| 45

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

Edited by PShim

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

связь то какая?
вот есть у вас 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?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Цитата

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Super_Saimon
      Добрый день! Я столкнулся с такой ситуацией: создается в компании статическая страница для хранения служебных документов. Иконки там, по-факту, не нужны, но начальник как во всем известном видео: "Хочу иконки!". Для нее поднимается локальный сервер без выхода в инет. На сайте есть ссылка прямая на хранилище с данными иконками, но она при такой настройке сервера, не работоспособна. Я качнул с сайта архив с данными иконками. Прописал как в инструкции путь в проекте. И тут я в непонимании: в инструкции для локального подключения подключается файл с расширением .css, через  тег <link>, при этом все иконки, которые я использовал при подключении прямой ссылки на хранилище через <script>, пропали. Вместо них квадратики. Я пробовал  точно также через <script> указать локальный адрес на файл с расширением .js. Но в результате иконки просто пропали. В чем может быть проблема?
    • By misinkevych.alina
      Напиши скрипт который просит посетителя ввести число в prompt до тех пор, пока посетитель на нажмет Cancel и каждый раз добавляет введенное значение к общей сумме.
      При загрузке страницы пользователю предлагается в prompt ввести число. Ввод добавляется к значению переменной total. Операция ввода числа продолжается до тех пор, пока пользователь не нажмет кнопку Cancel в prompt. После того как пользователь прекратил ввод нажав кнопку Cancel, показать alert со строкой 'Общая сумма чисел равна [сумма]'. let input; let total = 0;
    • By purple/ocean
      Как правильно сверстать картинки(руку, лист салата и тд) на данном шаблоне?

      Интересуют именно первые 3 изображения, а именно тарелка, рука с дошиком и лист салата.
      Тарелку можно просто сверстать допустим на флексах разбив блок на 3 столбца. Но вот интересно как сверстать две оставшиеся картинки так еще и с текстом.
      Я подумал, что можно также сверстать на тех же флексах разбив на те же 3(в случае с рукой) и 2(в случае с листом салата) колонки флекс сетку, но в таком случае изображения толкали бы друг друга так как рука с тарелкой и лист салата имеют общую площадь расположения на странице. Как это сделать? Помогите пожалуйста, может какое-то свойство прилипания или вообще другой метод верстки?
  • Member Statistics

    46,421
    Total Members
    3,128
    Most Online
    Openair
    Newest Member
    Openair
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • нашла ответ 'use strict'; class StringBuilder { constructor(value) { this.value = value; } get val() { return this.value; } set val(value) { this.value = value; } append(str) { this.value += str; } prepend(str) { this.value = `${str} ${this.value}`; } // додає елемент на поч і в кін pad(str) { // this.value = str + this.value + str; this.value = ` ${str} ${this.value} ${str}`; } } const builder = new StringBuilder('.'); // const value = builder.value(); // console.log(value); builder.append('^'); console.log(builder.value); // '.^' builder.prepend('^'); console.log(builder.value); // '^.^' builder.pad('='); console.log(builder.value); // '=^.^='  
    • Не могу понять где у меня ошыбка. нужно написать класс и зделать следуещое:  Геттер value - возвращает текущее значение поля _value Метод append(str) - получает парметр str (строку) и добавляет ее в конец _value Метод prepend(str) - получает парметр str (строку) и добавляет ее в начало value Метод pad(str) - получает парметр str (строку) и добавляет ее в начало и в конец _value 'use strict'; class StringBuilder { constructor(value) { this._value = value; } get itev() { return this._value; } append(str) { this._value.push(str); } prepend(str) { this._value.unshift(str); } // додає елемент на поч і в кін pad(str) { this._value.split(' '); } } const builder = new StringBuilder('.'); // const value = builder.value(); // console.log(this.value); builder.append('^'); console.log(builder.value); // '.^' builder.prepend('^'); console.log(builder.value); // '^.^' builder.pad('='); console.log(builder.value); // '=^.^='
    • Я думаю тем, что на параграфы делятся статьи, главы книг и т.п., в общем всё что предназначено для чтения. Зачем же менять назначение параграфа включая его в форму, если есть div, который служит для тех ситуаций, когда текстовому блоку не нужна семантическая окраска.
  • Popular Contributors