Разрешено ли скачивать файлы из мини-приложений Telegram?

Question

Парамон

react , telegram

Разрешено ли скачивать файлы из мини-приложений Telegram?

Добрый день! У меня возникла проблема с загрузкой файлов из Telegram mini app. Я уже реализовал код, который работает на компьютере, но почему-то в мобильном приложении Telegram он не позволяет скачивать документы. Можете помочь с решением этой проблемы? 

Вот мой код: 
<pre><code class="typescript">import { useQuery } from '@tanstack/react-query'
import { UserService } from '../../services/user.service'
import { useTelegramWebApp } from '../../hooks/useTelegram'
import { ReportService } from '../../services/report.service'

const Reports = () =&gt; {
	const userId = useTelegramWebApp()
	const { data: currentUser } = useQuery({
		queryKey: ['currentUser', userId],
		queryFn: () =&gt; UserService.getUserById(userId),
		enabled: userId != null,
	})

	const downloadReport = async (isAuth: string) =&gt; {
		if (!currentUser?.organizationId) return

		try {
			const response = await ReportService.generatePdfReportByHRForUsers(
				currentUser.organizationId,
				'test',
				isAuth
			)

			const url = window.URL.createObjectURL(new Blob([response.data]))
			const link = document.createElement('a')
			link.href = url
			link.setAttribute('download', 'report.xlsx')
			document.body.appendChild(link)
			link.click()
			link.remove()

			toast.success('Отчет успешно скачан!')
		} catch (error) {
			toast.error('Ошибка при скачивании отчета.')
			console.error('Error downloading report:', error)
		}
	}

	return (
		&lt;div className='w-[90%] max-w-2xl mx-auto mt-8 mb-24'&gt;
			&lt;div className='grid grid-cols-1 gap-6 mt-6'&gt;
				&lt;button
					className='p-6 bg-white shadow-lg rounded-lg flex items-center justify-between hover:bg-blue-50 transition w-full text-left'
					onClick={() =&gt; downloadReport('false')}
				&gt;
					&lt;div&gt;

25 сентября 2024 г. 10:53

Ответы на вопрос 1

Похожие вопросы

Answer 1

Скачивание файлов из мини-приложений в Telegram может зависеть от определённых ограничений и особенностей, связанных с безопасностью и функциональностью самой платформы. В отличие от веб-приложений, работающих в браузере, мини-приложения Telegram имеют ограничения на выполнение некоторых действий, таких как скачивание файлов напрямую.

В вашем коде скачивание файла осуществляется с использованием `createObjectURL` и создания элемента `<a>` для инициирования загрузки. Однако такие подходы могут не работать должным образом в мобильном приложении Telegram. Вместо этого вы можете попробовать несколько альтернативных решений:

1. **Использование ссылки для скачивания:** Вместо создания Blob-объекта и использования временной ссылки, вы можете вернуть URL-адрес файла, который будет доступен для скачивания. В случае успеха, Telegram уже предоставляет прямую ссылку для скачивания, и пользователь будет перенаправлен для скачивания файла в его браузере.

2. **Использование Telegram Bot API:** Если возможно, можете скачать файл через бота. Например, при помощи бота вы можете отправить файл пользователю в чат, где он сможет его скачать более привычным способом.

3. **Инструкция для пользователей:** Если функциональность не поддерживается на мобильном приложении, вы можете добавить уведомление, предлагающее пользователям скачать файл через браузер, если это возможно.

Вот пример того, как можно изменить функцию `downloadReport` для использования прямой ссылки:

```typescript
const downloadReport = async (isAuth: string) => {
	if (!currentUser?.organizationId) return;

	try {
		const response = await ReportService.generatePdfReportByHRForUsers(
			currentUser.organizationId,
			'test',
			isAuth
		);

		// Проверьте, возвращает ли ваш сервер прямой URL для скачивания.
		if (response.data.fileUrl) {
			// Перенаправьте пользователя на URL
			window.open(response.data.fileUrl, '_blank');
			toast.success('Отчет успешно скачан!'); // Или сообщение о том, что файл открыт в новом окне.
		}
	} catch (error) {
		toast.error('Ошибка при скачивании отчета.');
		console.error('Error downloading report:', error);
	}
}
```

Перед использованием этого метода убедитесь, что `fileUrl` - это ссылка, по которой файл доступен для скачивания, и что у пользователей есть соответствующий доступ к данному ресурсу.