Как создать внешнюю ссылку для скачивания в React? - PullRequest
0 голосов
/ 03 февраля 2020

Как создать ссылку с protectDefault, и при нажатии она должна запустить загрузочный файл с внешнего URL в React

return (
<Link to="/page">
 <img src={src} />
 <a href="https://external_photo_uri/pic.jpg" download />
</Link>
)

enter image description here

Ответы [ 4 ]

2 голосов
/ 03 февраля 2020

Вы можете создать обычный тег привязки с атрибутом загрузки.

Пример

<a href="myurl" download> <img src={src} /></a>
1 голос
/ 04 февраля 2020

Я решил эту проблему. Я создаю родительский div для тега привязки и запускаю по клику e.stopPropagation ()

0 голосов
/ 03 февраля 2020

Вы можете использовать response-download-link

Простой компонент для загрузки данных из кэша на стороне клиента (например, flux, redux). Дизайн для использования с browserify или webpack.

Установка с:

npm install --save react-download-link

Включено с:

import DownloadLink from "react-download-link";

Использование:

<DownloadLink
    filename="myfile.txt"
    exportFile={() => "My cached data"}                                           
>
    Save to disk                                                
</DownloadLink>

Или с Обещаниями:

<DownloadLink
filename="myfile.txt"
exportFile={() => Promise.resolve("My cached data")}>
    Save to disk                                                
 </DownloadLink>

Компонент по умолчанию будет привязанным тегом, но реквизит tagName примет строку любого другого тега HTML, который вы предпочитаете, такого как «кнопка».

0 голосов
/ 03 февраля 2020

Пожалуйста, попробуйте с этим.

<!DOCTYPE html>
<html>
<body>

<p>Click on the w3schools logo to download the image:<p>

<a href="/images/myw3schoolsimage.jpg" download>
  <img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>

</body>
</html>

Ссылка: https://www.w3schools.com/tags/att_download.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...