Форум программистов, компьютерный форум, киберфорум
Наши страницы
C#: ASP.NET MVC
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
Goret
1 / 1 / 2
Регистрация: 25.02.2016
Сообщений: 133
1

Сохранить данные на компьютер в файле через Ajax

22.08.2019, 21:32. Просмотров 952. Ответов 2
Метки нет (Все метки)

Доброго времени суток. Есть контролер, в котором есть метод Send, который получает с UI-ки данные о таблице.

C#
1
2
3
public void Send(TableModel table, EFileType type)
 {
}
Есть форма, которая работает в модальном окне. Нужно сделать, чтобы после выбора формата , выполнялась загрузка этих данных в файл и сохранялось на компьютер .

HTML5
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
<div class="modal fade" id="SaveModal" tabindex="-1" role="dialog" aria-labelledby="SaveModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="SaveModalLabel">Save dialog</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Change a file extension</p>
                <form>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="format" id="csvRadionButton" value="csv" checked>
                        <label class="form-check-label" for="csvRadionButton">
                            CSV
                        </label>
                    </div>
                </form>
                <div id="senderFile">
                    <p id="pSenderFile"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button onclick="SaveFile()" id="saveAs" type="submit" class="btn btn-success">Save file</button>
            </div>
        </div>
    </div>
</div>
Эту загрузку нужно осуществить через Ajax. Вот здесь возникли трудности. Так как мало знаком с этой технологией. Кто может помочь
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SaveFile() {
    let data = JSON.stringify({
        tableId: tableModel.Id, width: tableModel.Width,
        heigth: tableModel.Height, formulas: tableModel.Formulas
    });
    $.ajax({
        type: "POST",
        url: "/Spreadsheet/Send/",
        data: JSON.stringify({
            idTable: id
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            if (response.stateResult) {
                //document.location.reload(true);
                //alert("URA");
            }
        }
    })
}
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.08.2019, 21:32
Ответы с готовыми решениями:

Сохранить данные в хтмл файле
здравствуйте, есть хтмл файл, в нём имеется возможность создавать таблицу, вводить в неё данные,...

Как сохранить данные в файле?
Программа на VB ,связанная с базой Access через Adodc, нужно сохранить данные таблиц в файле,...

Ввести и сохранить в файле данные структуры
Ввести и сохранить в файле данные следующей структуры: название отеля, стоимость номера по...

Как данные из listbox сохранить в файле .xls
Собственно, в теме и заключается вопрос :yes:

Ввести и сохранить в файле данные следующей структуры
Ввести и сохранить в файле данные следующей структуры: наименование товара, фирма изготовитель,...

2
Goret
1 / 1 / 2
Регистрация: 25.02.2016
Сообщений: 133
23.08.2019, 10:41  [ТС] 2
Вот сделал скачивание, но немного коряво
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function SaveFile() {
    var p = document.getElementById("saveAs");
    var format = $("input[name='format']:checked").val();
    let data = JSON.stringify({ table: tableModel, type: format });
    $.ajax({
        type: "POST",
        url: "/Spreadsheet/Send/",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            if (response.stateResult) {
                document.location.reload(true);
                //alert("URA");
                //var text = 'как записать строку в файл ".txt" с помощью js?';
                document.write(
                    '<a href="data:text/plain;charset=utf-8,%EF%BB%BF' + encodeURIComponent(data) + '" download="text.' + format.toString() + '">' + p + '</a>'
                )
            }
        }
    })
}
Так как переходит на пустую страницу, где есть ссылка на скачивание. Хотелось бы, чтобы скачивание началось по клику по кнопке SaveAs
0
carrotik
98 / 73 / 27
Регистрация: 21.02.2019
Сообщений: 319
23.08.2019, 16:32 3
Лучший ответ Сообщение было отмечено Goret как решение

Решение

Goret,
..есть такой костыль, как сделать это из JS без ajax-a ... смысл в том, что создается временная форма, в которую передаются параметры, и эта форма submit-ится, а потом удаляется из DOM-a ... вот пример из рабочего кода c использованием knockout и JQuery, но, думаю, понятен принцип ...

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
self.getFile = function (data, event) {
            getControls();
            var myString = self.justIds();
            var fileext = event.target.id.substring(0, 3);
            var fileurl = rejestrparam + fileext;
            var inputs = '<input type="hidden" name="matsIds" value="' +
                myString + '" /><input type="hidden" name="thisCom" value="' +
                scompany + '" /><input type="hidden" name="periodStart" value="' +
                sstart + '" /><input type="hidden" name="periodEnd" value="' +
                send + '" /><input type="hidden" name="thisExt" value="' + '.' +
                fileext + '" />';
            $('<form action="' + fileurl + '" method="post">' + inputs + '</form>')
                .appendTo('body').submit().remove();
        };
Добавлено через 29 минут
..или другой вариант через Blob ... я использую axios, но в принципе и прямо через ajax должно работать:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
axios
        .post(fileurl, body, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          responseType: "arraybuffer"
        })
        .then(response => {
          const url = window.URL.createObjectURL(
            new Blob([response.data], {
              type: "application/octet-stream"
            })
          );
          const link = document.createElement("a");
          link.href = url;
          let filename = "users.pdf";
          link.setAttribute("download", filename); //or any other extension
          document.body.appendChild(link);
          link.click();
        });
1
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.08.2019, 16:32

Как сохранить учётные данные в новом созданном файле?
Медицинский учет детей, посещающих детский сад: что бы сохранило результат в новом созданном...

Заполнить и сохранить данные в текстовом файле в кодировке utf8
здравствуйте! люди подскажите !пару дней назад начал изучение языка С++,нужно написать программу...

Как можно сохранить данные в файле из TMemo в кодировке ASCII?
Как можно сохранить данные в файле из TMemo в кодировке ASCII, для просмотра с помощью Досовских...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru