Как скачать файл с html-сайта

Обновлено: 21.11.2024

По умолчанию ваш тег привязки является навигационной ссылкой, она будет вести на ссылку, указанную вами в атрибуте href.

Однако, когда вы добавите атрибут загрузки, он превратится в ссылку для скачивания. Предлагает загрузить файл. Загруженный файл будет иметь то же имя, что и исходное имя файла. Однако вы также можете установить собственное имя файла, передав значение атрибуту загрузки 🤩

Атрибут загрузки работает только для URL-адресов того же происхождения. Поэтому, если href не того же происхождения, что и сайт, он не будет работать. Другими словами, вы можете загружать только файлы, принадлежащие этому веб-сайту. Этот атрибут соответствует тем же правилам, изложенным в политике одного источника.

Эта политика представляет собой механизм безопасности, который помогает изолировать потенциально вредоносные документы и уменьшить возможные векторы атак. Так что же это означает для нашего атрибута загрузки? Что ж, это означает, что пользователи могут загружать только файлы с исходного сайта. Давайте рассмотрим пример:

Подробнее об этой политике можно узнать в веб-документе MDN

Эта функция поддерживается не всеми браузерами (кхе-кхе, IE). Поэтому, если вы ориентируетесь на конкретный браузер, убедитесь, что вы проверили совместимость, прежде чем использовать этот атрибут.

Вопрос. Как это можно использовать? Разве не логично назвать ваш файл так, как вы хотите, чтобы он загружался?

Мой ответ: Да, это было бы идеально. Но иногда у вас может быть собственное соглашение об именах файлов, которому вы должны следовать, что может не иметь смысла для пользователя. Так что возможность передать собственное имя файла может быть полезно 👍

: хороший вариант использования: я отслеживаю номер версии своего резюме, но рекрутеру, загружающему его с моего веб-сайта, не нужно знать, какая у него версия.

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

: Я использовал этот атрибут загрузки на моем личном веб-сайте портфолио, чтобы сделать свое резюме доступным для скачивания (pdf). Просто мощно👌

: Очень полезный совет. Небольшой нюанс, который изначально застал меня врасплох, заключается в том, что это работает только с запросами одного и того же источника, а не с перекрестным источником, где он игнорируется: Stack Overflow

Эта статья написана в соавторстве с сотрудниками wikiHow. Наша обученная команда редакторов и исследователей проверяет статьи на точность и полноту. Команда управления контентом wikiHow тщательно следит за работой нашей редакции, чтобы гарантировать, что каждая статья подкреплена достоверными исследованиями и соответствует нашим высоким стандартам качества.

Эту статью просмотрели 944 493 раза.

Предлагать ссылки для скачивания файлов через ваш веб-сайт — обычное желание, и есть несколько способов сделать это. Сайты, предлагающие инструменты для создания веб-сайтов, такие как GoDaddy, WordPress и Weebly, часто предлагают возможность загрузки файла одновременно с созданием ссылки. Если вы создаете свой собственный сайт с нуля, вы можете создавать ссылки для скачивания, используя простой HTML-код для файлов, размещенных на вашем сервере.

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

Ваш FTP-клиент уже должен быть настроен для подключения к вашему веб-серверу, так как вы уже загрузили туда свой сайт. Если это не так, см. раздел «Как использовать FTP», чтобы получить инструкции по настройке FTP-клиента для подключения к серверу.
Если на вашем веб-сервере есть онлайн-панель управления, вы можете получить доступ к файлам сервера напрямую через веб-интерфейс управления. Вы сможете получить к нему доступ, когда войдете на свой сайт в качестве администратора. Когда вы окажетесь в панели управления, выберите опцию "Диспетчер файлов".
Если вы создали свой веб-сайт с помощью инструмента для создания веб-сайтов, такого как WordPress, Weebly или Wix, см. инструкции для конкретной платформы в приведенных ниже методах.

Чтобы загрузить файлы с помощью программы FTP, перетащите файл в папку в окне FTP, куда вы хотите его загрузить. Загрузка начнется немедленно. Скорость загрузки обычно намного ниже скорости загрузки, поэтому полная загрузка файла может занять некоторое время.
Если вы используете файловый менеджер виртуальной панели управления, нажмите кнопку "Загрузить" в верхней части окна.Найдите на своем компьютере файл, который хотите загрузить. Загрузка больших файлов на сервер может занять некоторое время.

Откройте страницу, на которую вы хотите добавить ссылку, в редакторе кода. После того, как файл будет загружен, вам нужно будет добавить ссылку на него на свою веб-страницу. Откройте файл HTML, на который вы хотите добавить ссылку. Вы можете дважды щелкнуть его в файловом менеджере панели управления, чтобы открыть его во встроенном редакторе страниц. Если вы используете FTP, щелкните правой кнопкой мыши файл HTML на своем сервере и используйте команду «Открыть с помощью», чтобы открыть его в коде или текстовом редакторе.

Найдите место на странице, куда вы хотите добавить ссылку. Поместите курсор в то место в коде, куда вы хотите вставить ссылку для скачивания. Это может быть тело абзаца, внизу страницы или где-либо еще.

Добавьте код для ссылки. Введите следующий код HTML5 в качестве ссылки для скачивания. Это запустит загрузку для пользователей сразу же после того, как они нажмут на ссылку. Пока загружаемый файл находится в той же папке, что и файл HTML, вам просто нужно использовать имя и расширение. Если файл находится в другой папке, необходимо указать структуру папок. [1] X Источник исследования

Создайте кнопку загрузки вместо ссылки. Вы можете использовать изображение вместо текста, чтобы создать ссылку для скачивания. Для этого требуется, чтобы изображение кнопки уже было на вашем веб-сервере.

Сохраните изменения в файле HTML. Когда вы будете удовлетворены своим кодом, сохраните изменения в файле HTML и повторно загрузите его, если это необходимо. Вы сможете увидеть новую кнопку загрузки на своем веб-сайте.

Откройте свой сайт в редакторе сайтов WordPress. Если вы используете WordPress для управления и публикации своего веб-сайта, вы можете использовать встроенные инструменты, чтобы добавить ссылку для скачивания на любую из ваших страниц. Войдите в панель управления WordPress, используя учетную запись администратора.

Поместите курсор туда, где должна появиться ссылка. Вы можете разместить ссылку в середине существующего абзаца или создать для нее новую строку.

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

Добавьте описание файла. Вы можете ввести описание под файлом в окне «Добавить медиафайл». Это будет текст, отображаемый в качестве ссылки для скачивания.

Нажмите кнопку "Вставить в сообщение/на страницу". Это вставит ссылку для скачивания в место вашего курсора. Обратите внимание, что это будет ссылка на страницу вложения, а не на фактический файл. Это ограничение программного обеспечения WordPress. [3] X Источник исследования

Откройте свой веб-сайт в редакторе Weebly. Войдите на сайт Weebly и откройте свою веб-страницу в редакторе Weebly.

Выберите текст или объект, который вы хотите превратить в ссылку. Вы можете выделить текст в текстовом поле или выбрать изображение на своей странице, которое вы хотите превратить в ссылку для скачивания вашего файла.

Нажмите кнопку "Связать". Когда у вас выделен текст, он выглядит как цепочка и находится в верхней части текстового редактора. Выбрав изображение, нажмите «Ссылка» на панели управления изображением.

Обычные пользователи могут иметь файлы размером не более 5 МБ. Премиум-пользователи имеют ограничение на размер файла 100 МБ.

Опубликуйте свой сайт, чтобы увидеть новую ссылку. После загрузки файла ссылка будет готова к использованию. Нажмите кнопку «Опубликовать», чтобы опубликовать свои изменения на действующем сайте. Теперь ваши посетители смогут щелкнуть ссылку и загрузить файл.

Откройте свой сайт в редакторе Wix. Если вы используете Wix для создания сайта и управления им, войдите на сайт Wix и загрузите веб-страницу в редакторе сайта.

Выберите текст или изображение, которое вы хотите превратить в ссылку. Вы можете создавать ссылки из текста на своей странице или из изображений.

Текст. Нажмите кнопку «Ссылка» в окне «Параметры текста». Кнопка выглядит как звено цепи. Откроется меню ссылок.
Изображение. Выберите «Ссылка открыта» в меню «При нажатии на изображение» в окне «Параметры изображения». Нажмите «Добавить ссылку» в разделе «Что делает ссылка?» раздел. Откроется меню ссылок.

Выберите «Документ» из списка параметров ссылки. Это позволит вам загружать различные файлы документов.

Перетащите файл, который хотите загрузить, в окно. Вы можете загружать только файлы DOC, PDF, PPT, XLS и ODT (и их подформаты). Это означает, что вы по существу ограничены загрузкой документов. Размер файла ограничен 15 МБ.

Опубликуйте свой сайт. После того, как вы загрузили файл, ваша ссылка готова к работе. Нажмите кнопку "Опубликовать" в правом верхнем углу, чтобы сохранить изменения и отправить их на действующий сайт.

Откройте свой сайт в редакторе сайтов GoDaddy. Если вы использовали конструктор сайтов GoDaddy, войдите на сайт GoDaddy и откройте свой сайт в редакторе.

Выберите объект или текст, который вы хотите превратить в ссылку. Вы можете превратить любой объект на вашем сайте в ссылку, а также любой текст из ваших текстовых полей. Если вы хотите создать кнопку загрузки, нажмите кнопку "Кнопка" в левом меню, чтобы вставить ее.

Создайте ссылку из выбранного объекта или текста. Если у вас выбран объект, нажмите кнопку «Настройки», чтобы открыть меню. Если у вас выделен текст, нажмите кнопку "Ссылка" в инструментах форматирования текста, которая выглядит как цепочка.

Нажмите красную стрелку под надписью "Ссылка (URL)" и выберите "Загрузить". Это позволит вам выбрать файл, который вы хотите загрузить на свой веб-сайт.

Нажмите кнопку "Обзор" и найдите файл, который хотите загрузить. Размер файлов ограничен 30 МБ. Вы не можете загружать HTML, PHP, EXE, DLL и некоторые другие потенциально опасные типы файлов.

После загрузки файла нажмите "Вставить". После завершения загрузки вы увидите галочку рядом с файлом в окне.

Нажмите "Сохранить", чтобы создать ссылку. При нажатии кнопки "Сохранить" файл будет применен к созданному вами объекту или текстовой ссылке.

Нажмите "Опубликовать", чтобы сохранить изменения на своем сайте. Это сделает вашу новую ссылку активной, и ваши посетители смогут скачать связанный файл. [4] X Источник исследования

Нет, гиперссылка — это просто то, что перенаправляет вас на ссылку, это не означает, что файл должен находиться на сервере, чтобы его можно было перенаправить.

Да! Вы можете использовать любое приложение для обработки текстов (Android Notepad или программы просмотра HTML в Play Store и т. д.) для ввода HTML-кода. Если вы можете сделать это на ПК, вы можете и на мобильном телефоне. Шаги точно такие же.

Об этой статье

Эта статья написана в соавторстве с сотрудниками wikiHow. Наша обученная команда редакторов и исследователей проверяет статьи на точность и полноту. Команда управления контентом wikiHow тщательно следит за работой нашей редакции, чтобы гарантировать, что каждая статья подкреплена надежными исследованиями и соответствует нашим высоким стандартам качества. Эту статью просмотрели 944 493 раза.

Чтобы сделать файл доступным для загрузки с веб-сайта, начните с создания на сервере папки для HTML-страницы веб-сайта и файла, которым вы хотите поделиться. Создав папку, вы сможете найти ее с помощью файлового менеджера панели управления или файлового браузера в вашей FTP-программе. Отсюда вы можете сразу начать загрузку файлов, просто перетащив их в папку в окне FTP или нажав кнопку «Загрузить» в диспетчере виртуальной панели управления. Как только все будет загружено, откройте свою веб-страницу в редакторе кода и поместите курсор туда, куда вы хотите добавить ссылку для скачивания. В завершение с помощью кода HTML5 создайте ссылку для скачивания файла, а затем сохраните изменения, внесенные на HTML-страницу. Чтобы узнать больше советов, в том числе о том, как сделать файл загружаемым с вашего сайта WordPress, читайте дальше!

У меня есть базовое представление о HTML. Я хочу создать ссылку для загрузки на своем тестовом веб-сайте, но не знаю, как ее создать. Как сделать ссылку для скачивания файла, а не для его посещения?

10 ответов 10

В современных браузерах, поддерживающих HTML5, возможно следующее:

Вы также можете использовать это:

Это позволит вам изменить имя загружаемого файла.

Я использовал тот же код для загрузки файла PFD, и я проверил во всех браузерах, все они поддерживаются, но в сафари этот код не работает. Safari вместо загрузки файла pdf открывается в новой вкладке.

Это не работает для меня, у меня есть файл .exe, который я хочу, чтобы пользователи загружали. Однако пытался сделать это сам, чтобы проверить, но это не работает. Это просто приведет меня к исходному коду, который я не хочу просматривать.

Этот ответ устарел. Теперь у нас есть атрибут загрузки. (см. также эту ссылку на MDN)

Если под "ссылкой для скачивания" вы подразумеваете ссылку на файл для скачивания, используйте

target=_blank вызовет появление нового окна браузера перед началом загрузки. Это окно обычно закрывается, когда браузер обнаруживает, что ресурс является загружаемым файлом.

Обратите внимание, что типы файлов, известные браузеру (например, изображения JPG или GIF), обычно открываются в браузере.

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

почему бы не использовать атрибут загрузки, если вы получаете файл типа jpg, он будет скачиваться, а не просто открываться.

@Dudeson, пожалуйста, укажите, что "не будет работать" и о каких версиях IE вы говорите. (Однако теперь можно безопасно использовать подход, описанный в гораздо более свежем ответе TIIUNDER ниже. Он должен получить отметку о принятии.)

@Серджиу, ответу семь лет. Я не могу удалить его, и спрашивающий не ответил на мою просьбу переключить отметку принятия. мы ничего не можем сделать, хотя я добавлю ссылку на более свежий ответ

Так делали до появления HTML5 (и до сих пор работает в браузерах, поддерживающих HTML5).

это идеально подходит для реализации на стороне сервера, просто укажите тип контента. он хорошо поддерживается по сравнению с атрибутом загрузки

Ссылка для скачивания — это ссылка на ресурс, который вы хотите загрузить. Она устроена так же, как и любая другая ссылка:

Чтобы сделать ссылку на файл, сделайте то же самое, что и ссылку на любую другую страницу:

Чтобы принудительно загрузить вещи, даже если они имеют встроенный плагин (Windows + QuickTime = тьфу), вы можете использовать это в своем htaccess / apache2.conf:

Это заставит загружаться только все файлы этого типа. Хорошо, если вы этого хотите, но если вы забудете и захотите, чтобы другой файл того же типа отображался в браузере, а не загружался, это может вызвать приступы.

Вероятно, эта ветка уже устарела, но она работает в html5 для моего локального файла.

Это должно открыть PDF-файл в новом окне и позволить вам загрузить его (по крайней мере, в Firefox). Для любого другого файла просто сделайте его именем файла. Однако изображения и музыку лучше хранить в том же каталоге, что и ваш сайт. Так было бы

Здесь может помочь еще одна тонкость.

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

НО.. это основано на проверке расширения в имени файла URL! Вам не нужно возиться с сопоставлением расширения сервера, потому что вы хотите доставить один и тот же файл двумя разными способами. Таким образом, для загрузки вы можете обмануть его, связав файл с именем, которое непрозрачно для этого сопоставления расширения, указав на него, а затем используя функцию переименования загрузки, чтобы исправить имя.

Я надеялся, что просто добавление фиктивного запроса в конце или иное запутывание расширения сработает, но, к сожалению, это не так.

Если вы знаете, что у вас не будет обслуживания, вот как скачать материалы для чтения или документы, к которым вы можете получить доступ в автономном режиме через Chrome, Safari, Firefox, Edge, а также сторонние приложения и службы.

(Фото: Tonktiti/Shutterstock)

Информационная перегрузка реальна. У вас не всегда есть время прочитать статью из 5000 слов или сочное интервью, когда оно появляется в вашей ленте Twitter. И даже когда у вас есть время, вы можете оказаться под землей между станциями метро, оказаться в мертвой зоне или не иметь подключения к Wi-Fi.

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

Сохранить веб-страницу в Chrome

Рабочий стол

Для пользователей Chrome на настольном компьютере самый простой встроенный способ сохранить веб-страницу для чтения в автономном режиме – загрузить страницу в виде файла. Откройте меню из трех точек в правом верхнем углу и выберите Дополнительные инструменты > Сохранить страницу как. Вы также можете щелкнуть правой кнопкой мыши в любом месте страницы и выбрать «Сохранить как» или использовать сочетание клавиш Ctrl + S в Windows или Command + S в macOS.

Chrome может сохранить всю веб-страницу, включая текст и мультимедийные объекты, или только текст HTML. Загрузите нужный файл на свой компьютер и читайте страницу в любое время, даже без подключения к Интернету.

Андроид

Сохраните веб-страницу в приложении для Android, открыв значок меню из трех точек и коснувшись значка загрузки вверху. Баннер в нижней части экрана сообщит вам, когда страница будет доступна для чтения в автономном режиме. Щелкните Открыть, чтобы просмотреть статическую версию страницы. Чтобы получить доступ к загрузкам позже, откройте меню из трех точек и нажмите "Загрузки".

Chrome для iOS и iPadOS

Чтобы сделать статью доступной для чтения в автономном режиме в приложении Chrome на iPhone или iPad, коснитесь значка "Поделиться" (стрелка вверх) и выберите "Добавить в список для чтения". Откройте трехточечное меню браузера и выберите «Список для чтения», чтобы просмотреть все сохраненные страницы. Нажмите и удерживайте сохраненный элемент, пока не появится меню, затем нажмите «Открыть офлайн-версию», и все готово для чтения в автономном режиме.

Сохранение веб-страницы в Microsoft Edge

Браузер Microsoft Edge работает на том же движке Chromium, что и Google Chrome, поэтому инструкции здесь будут аналогичными. Нажмите на меню с тремя точками в правом верхнем углу и выберите Дополнительные инструменты > Сохранить страницу как, чтобы загрузить файл на свой компьютер.

На Android этот процесс аналогичен Chrome, но меню с тремя точками находится внизу по центру экрана. Коснитесь его, слегка проведите вверх и выберите Страница загрузки. Загрузка появится внизу экрана; коснитесь Открыть, чтобы прочитать. Чтобы прочитать позже, коснитесь трехточечного меню и выберите «Загрузки». Сохраненные веб-страницы будут автоматически доступны для чтения в автономном режиме.

В Edge для iOS пункт «Список для чтения» появляется при касании трехточечного меню, хотя для нас он был недоступен. Лучше всего нажать значок "Поделиться" и выбрать "Сохранить в Pocket".

Сохранение веб-страницы в Safari

Сохраните веб-страницу в Safari, открыв «Файл» > «Сохранить как». Затем вы можете выбирать между форматами файлов «Веб-архив» (все текстовые и мультимедийные ресурсы) или «Исходный код страницы» (только исходный текст). Выберите «Файл» > «Экспортировать как PDF», если вам нужна PDF-версия статьи.

В Safari также есть функция «Список для чтения», позволяющая сохранять статьи для чтения в автономном режиме. Пользователи настольных компьютеров могут щелкнуть значок «Поделиться» и выбрать «Добавить в список для чтения». Другой вариант — «Закладки» > «Добавить в список для чтения». После добавления нажмите кнопку «Показать боковую панель» на панели инструментов Safari и убедитесь, что выбран значок очков. Щелкните запись правой кнопкой мыши и выберите Сохранить в автономном режиме.

Убедитесь, что сохраненные статьи по умолчанию доступны для чтения в автономном режиме в Safari > «Настройки» > «Дополнительно». Установите флажок рядом с пунктом Автоматически сохранять статьи для чтения в автономном режиме.

Этот процесс работает одинаково на iOS и iPadOS. Коснитесь панели «Поделиться» и выберите «Добавить в список для чтения». Коснитесь значка «Закладка» и выберите значок очков, чтобы просмотреть список чтения. Нажмите и удерживайте статью и выберите «Сохранить в автономном режиме» во всплывающем меню, чтобы сохранить статью.

Настройте доступ к сохраненным статьям в автономном режиме по умолчанию в разделе «Настройки» > «Safari». Прокрутите страницу до конца и включите переключатель рядом с пунктом «Автоматически сохранять в автономном режиме».

Сохранить веб-страницу в Firefox

Для чтения в автономном режиме с помощью Firefox откройте меню-гамбургер и выберите «Сохранить страницу как», чтобы загрузить страницу в виде файла. У вас будет возможность загрузить всю страницу, только HTML или простой текстовый файл.

Читайте также: