В соответствии с caniuse атрибут download элемента <a> поддерживается в Microsoft Edge build 10547+, но not IE or Safari.Как скачать файл без использования элемента <a> с атрибутом загрузки или сервером?
Как загрузить файл-объект без использования <a> элемента с download набором атрибутов или сервером?
Существует несколько способов запуска загрузки. Ниже приведены некоторые из них:
Используйте форму:
<form method="get" action="mydoc.doc">
<button type="submit">Download</button>
</form>
Использование JavaScript:
<button type="submit" onclick="window.open('mydoc.doc')">Download</button>
Что делать, если у пользователя есть плагин для браузера которые открывают mydoc.doc? то как он будет загружен? – Star
Пользователь может выбрать сохранение содержимого, которое они видят через плагин браузера. Однако вы не можете принудительно загрузить из front-end. См. Это: https://stackoverflow.com/questions/8613725/how-can-i-force-download-with-html-and-or-javascript/8613899#8613899 –
Вы можете использовать data URIdata:[<mediatype>][;base64],<data> представление файла либо создается вручную или с использованием FileReader(), .readAsDataURL() с MIME типа установлены на application/octet-stream, encodeURIComponent(), window.open()
<script>
var file = "data:application/octet-stream,"
+ encodeURIComponent("<!DOCTYPE html>"
+ "<html><body>"
+ "<div>abc</div>"
+ "</body></html>");
var saveFile = window.open(file, "_self");
</script>
<script>
var blob = new Blob(["abc"], {type:"text/plain"});
var reader = new FileReader();
reader.addEventListener("load", function(e) {
// replace existing `MIME` type with `application/octet-stream`
var file = "data:application/octet-stream;"
+ e.target.result.split(/;/)[1];
var saveFile = window.open(file, "_self");
});
reader.readAsDataURL(blob)
</script>
Хотя я поддерживаю @ ответ LeoFarmer, я хотел бы предложить два "взломать" подходы:
Если файл очень мал , вы можете использовать a с href='data:[<mediatype>][;base64],<data>'.
Это может позволить вам добавить размещение контента в mediatype, эмулируя HTTP-заголовок. Этот хак также не такой портативный, как можно было бы надеяться.
В файлах с малыми и средними данными можно загрузить файл с использованием AJAX, а затем use the Javascript File API to prompt for file saving (API не поддерживает сохранение, но легко преобразовать данные в URL-адрес данных).
Если вы хотите избежать использования Javascript File API, вы можете попробовать эмулировать якорный щелчок, как suggested here.
Опять же, как отметил Лео Farmer, эти решения не могут обещать, что браузер не будет открывать файл в новой вкладке вместо сохранения его на диск, но я думаю, что это с уверенностью сказать, что все пользователи смогут грамотно деградировать до cmd+S или ctrl+S ярлык для клавиатуры :-)
Вы можете сделать это, используя как атрибут загрузки, так и jquery. атрибут загрузки не поддерживается в ie и safari/ios. Таким образом, вы можете использовать JQuery, чтобы сделать это
$('.download').click(function(e) {
e.preventDefault(); //stop the browser from following
window.location.href = 'uploads/file.doc';
});
<a href="no-script.html" class="download">Download</a>
Использование FileSaver.js
Он поддерживает все широко используемые браузеры.
Просто включите:
<script type="text/javascript" src="FileSaver.min.js"></script>
и использовать его как:
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);
Примечание: Чтобы заставить его работать также в Safari < 6, Opera < 15 и FireFox < 20 вам нужно включить Blob.js в качестве зависимости.
Конструктор 'File' доступен в браузерах, упомянутых в последнее предложение ответа? – guest271314
Нет, они этого не делают. (http://caniuse.com/#search=File). Посмотрите на документацию FileSaver.js, есть и другие способы ее сохранения. Надеюсь, вы найдете это полезным. :) – padr
Если вы используете серверную сторону, то следуйте механизму отправки формы, чтобы отобразить страницу. В MVC мы можем использовать ниже код
HTML@using (Html.BeginForm("GetAttachment", "User", FormMethod.Post))
{
<button type="submit">Download</button>
}
public ActionResult GetAttachment()
{
string filename = "File.pdf";
string filepath = AppDomain.CurrentDomain.BaseDirectory + "/Path/To/File/" + filename;
byte[] filedata = System.IO.File.ReadAllBytes(filepath);
string contentType = MimeMapping.GetMimeMapping(filepath);
var cd = new System.Net.Mime.ContentDisposition
{
FileName = filename,
Inline = true,
};
Response.AppendHeader("Content-Disposition", cd.ToString());
return File(filedata, contentType);
}
_ "без использования элемента' 'с атрибутом загрузки или сервером?" _ – guest271314
Используя форму, мы отправляем данные на сервер и сервер, возвращаем файл. –
A '
Вы можете проверить мой ответ здесь: https://stackoverflow.com/questions/38524320/download-pdf -file-from-ajax-response/38552959 # 38552959 Он дает именно то, что вы ищете. – Dekel
@Dekel См. Критерии в OP, '.responseType' не был определен в этот момент в разработке браузера. – guest271314
Вы ищете решение для 2016-совместимого браузера или 2017? :) – Dekel