Блог

Я создаю веб-приложение с помощью React.js. У меня есть несколько файлов excel и pdf в моем облачном хранилище firebase, и я хочу их загрузить. В моем компоненте Devize я извлекаю каждый файл из хранилища, и при нажатии на конкретный файл, который был нажат, он должен быть автоматически загружен. Логика загрузки файлов находится в моем компоненте загрузки. Если я попытаюсь загрузить файл excel, он отлично работает, но когда я пытаюсь загрузить файл pdf, на вкладке «Моя сеть» отображается, что мой запрос на сервер firebase был успешно выполнен с кодом 200, но браузер не запускает автоматическую загрузку. Я, кажется, не могу понять, почему это происходит. Ниже вы можете найти мой код:

 const Devize = () =gt; {  const dispatch = useDispatch();  const history = useHistory();  const [downloadUrl, setDownloadUrl] = useState('');  const searchTerm = useSelector(selectSearchTermDevize);  const devizeState = useSelector(selectDevizeState);  const searchResults = useSelector(selectSearchDevizeState);  const [startDownload, setStartDownload] = useState(false);   useEffect(() =gt; {  async function fetchTheData() {  try {  // Get devize  const res = await fetchDataFromStorage('devize');  dispatch(setDevizeState({ devize: [...res] }));  // Get echipamente  const echipamente = await fetchEchipamente();  if (echipamente) {  dispatch(setEchipamente({ echipamente: [...echipamente] }));  }  // Get numere  const nr = await getData();  dispatch(setNumere({ numere: [...nr] }));  } catch (err) {  console.log(err);  }  }  fetchTheData();  // Avoid multiple files download!  return () =gt; {  setDownloadUrl('');  };  }, []);   useEffect(() =gt; {  if (downloadUrl !== '') {  setStartDownload(true);  }  }, [downloadUrl]);   const handleDownload = async (e) =gt; {  try {  const url = await storage  .ref(`devize/${e.target.dataset.name}`)  .getDownloadURL();  setDownloadUrl(url);  } catch (err) {  console.log(err.message);  }  };   const downloadModel = async (e) =gt; {  try {  await storage  .ref('modele/DEVIZ.xlsx')  .getDownloadURL()  .then((url) =gt; setDownloadUrl(url));  } catch (err) {  console.log(err.message);  }  };   return (  lt;divgt;  lt;Header /gt;  lt;WrapperForUploadAndSearchDevizegt;  lt;SearchDevize /gt;  lt;WrapperForUploadModelCreateDevizegt;  lt;UploadDevize /gt;  lt;StyledModelDeviz onClick={downloadModel}gt;  lt;TextDevizgt;Descarca model deviz!lt;/TextDevizgt;  lt;/StyledModelDevizgt;  lt;StyledCreareDeviz onClick={() =gt; history.push('/creare-deviz')}gt;  lt;TextDevizgt;Creare Deviz nou!lt;/TextDevizgt;  lt;/StyledCreareDevizgt;  lt;/WrapperForUploadModelCreateDevizegt;  lt;/WrapperForUploadAndSearchDevizegt;   lt;WrapperForResultsDevizegt;  {searchTerm === ''  ? devizeState.map((deviz, index) =gt; (  lt;DevizElement  data-name={deviz.name}  key={index}  onClick={handleDownload}  gt;  {deviz.name}  Created at: {deviz.createdAt.split('-')[0]}-  {deviz.createdAt.split('-')[1]}  lt;/DevizElementgt;  ))  : searchResults.map((res, i) =gt; (  lt;DevizElement data-name={res.name} key={i} onClick={handleDownload}gt;  {res.name}  Created at:{res.createdAt.split('-')[0]}-  {res.createdAt.split('-')[1]}  lt;/DevizElementgt;  ))}   {startDownload ? lt;DownloadComponent downloadSrc={downloadUrl} /gt; : null}  lt;/WrapperForResultsDevizegt;  lt;/divgt;  ); };  export default Devize;   const DownloadComponent = ({ downloadSrc }) =gt; {  return (  lt;WrapperIFramegt;  lt;iframe src={downloadSrc} /gt;  lt;/WrapperIFramegt;  ); };  export default DownloadComponent;