Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2023, 16:57
Новичок на форуме
Отправить личное сообщение для Steven100500 Посмотреть профиль Найти все сообщения от Steven100500
 
Регистрация: 04.07.2023
Сообщений: 5

Загрузка файла пользователю на комп при нажатии на кнопки на UI
Добрый день, подскажите, пожалуйста, можно ли файл, хранимый в виде массива byte[], загружать пользователю на комп при нажатии кнопки на стороне клиента? (т.е. по аналогии с нажатием на тег с атрибутами href - с указанием ссылки на файл - и download), просто файл, лежащий на сервере напрямую мешают выгрузить настройки безопасности, видимо. Если даю ссыль - файл не загружается с ошибкой 400 - Not allowed to load local resource: далее URI идет.)

Последний раз редактировалось Steven100500, 04.07.2023 в 18:43.
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2023, 17:27
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,707

Если браузер может загрузить этот файл с сервера, то он сможет его выгрузить его на компьютер пользователя. Естественно с согласия пользователя.
Примерно такая последовательность действий
// Загрузить файл с сервера в виде Blob
const res = await fetch ('url на сервере');
const blob = await res.blob();

//Создать ObjectURL на этот Blob
const hrefurl =  window.URL.createObjectURL(blob);

//Создать с помощью js элемент <а> с href с  этим ObjectURL и атрибутом downloal
const a = document.createElement ('a');
a.download = '';
a.href = hrefurl;
//Проимитировать клик на элементе a
a.click();


Но это все возможно, если скрипту разрешено загружать этот файл. Если страница и файл с одного сервера, то обычно можно. Если с разных доменов, то могут быть (скорее всего будут) ошибки CORS. Сервер должен послать вместе с файлами соответствующие заголовки, разрешающие загрузку.

Последний раз редактировалось voraa, 04.07.2023 в 17:36.
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2023, 17:39
Новичок на форуме
Отправить личное сообщение для Steven100500 Посмотреть профиль Найти все сообщения от Steven100500
 
Регистрация: 04.07.2023
Сообщений: 5

Спасибо большое, буду пробовать!

Последний раз редактировалось Steven100500, 04.07.2023 в 17:41.
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2023, 17:41
Новичок на форуме
Отправить личное сообщение для Steven100500 Посмотреть профиль Найти все сообщения от Steven100500
 
Регистрация: 04.07.2023
Сообщений: 5

Я понял, благодарю. Источник один и тот же. Файл я могу копирнуть в виде массива байт на серваке и передать в кач-ве респонса. Рисунки я уже передаю в формате base64, по крайней мере, img их в виде сорсов кушает преспокойно. Но теперь интересны другие форматы и уже в виде выгрузки на устройство юзверя.

Последний раз редактировалось Steven100500, 04.07.2023 в 17:45.
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2023, 17:49
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,707

Тут надо знать (или экспериментировать).
Может быть с fetch надо передавать заголовки, указывая MIME файла, который запрашивается.
Может быть у <a> надо установить атрибут type с необходимым MIME.
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2023, 17:53
Новичок на форуме
Отправить личное сообщение для Steven100500 Посмотреть профиль Найти все сообщения от Steven100500
 
Регистрация: 04.07.2023
Сообщений: 5

Варюсь в этой теме всего полтора месяца. Буду экспериментировать =)
Ответить с цитированием
  #7 (permalink)  
Старый 05.07.2023, 16:00
Новичок на форуме
Отправить личное сообщение для Steven100500 Посмотреть профиль Найти все сообщения от Steven100500
 
Регистрация: 04.07.2023
Сообщений: 5

В общем, сделал передачу файла в виде текста base64 с последующей выгрузкой на комп пользователя следующим образом:
1) Отдельно прописал функцию
urlToFile: async function(url, filename, mimeType) {
const res = await fetch(url);
const buf = await res.arrayBuffer();
return new File([buf], filename, { type: mimeType });
}
2) при нажатии на кнопку вызывается функция:
$(`id_кнопы`).click(function (e) {
e.preventDefault();
if ("файл_преобразованный_в_те ст_в_формате_base64") {
(async () => {
const file = await self.urlToFile(
`data:text/plain;base64,${fileInfo.AddPhotoData.bFile}`,
`hello.${переменная_с_расширен ем_файла}`,
"text/plain"
);
let fileLink = window.URL.createObjectURL(file);
const a = document.createElement('a');
a.download = fileInfo.AddPhotoData.PhotoName;
a.href = fileLink;
a.click();
})();
}
}
PS self - модуль, в котором лежит функция urlToFile. Даже не модуль, а не знаю, как назвать - может , класс, может пространство имен, на которую указывает переменная self. Ну, и никто не мешает сделать импорт из модуля =)
Огромное спасибо за помощь!!!! Подсказали, куда копать.

Последний раз редактировалось Steven100500, 05.07.2023 в 16:05.
Ответить с цитированием
  #8 (permalink)  
Старый 05.07.2023, 17:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Steven100500,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обновление страницы при нажатии кнопки vsco89 Events/DOM/Window 2 04.12.2020 16:28
Менять курсор при нажатии левой кнопки мыши Igorsrt Элементы интерфейса 21 31.10.2018 09:18
Как отловить событие с сайта, при нажатии кнопки на Гарнитуре Nickon Events/DOM/Window 2 16.10.2018 09:51
Смена картинок при нажатии Antonjrjr Элементы интерфейса 0 29.05.2017 11:57
Изменение цвета текста кнопки и цвета кнопки при нажатии Setta jQuery 22 31.07.2013 17:48