Tarayıcıyı tıklandığında görüntü dosyalarını indirmeye zorlayın


102

Tarayıcının görüntü dosyalarını bir Excel sayfasına tıklarken olduğu gibi indirmesine ihtiyacım var.

Bunu yalnızca istemci tarafı programlamayı kullanarak yapmanın bir yolu var mı?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js">
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        </script>
    </head>

    <script type="text/javascript">
        document.onclick = function (e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            if (element.innerHTML == "Image") {
                //someFunction(element.href);
                var name = element.nameProp;
                var address = element.href;
                saveImageAs1(element.nameProp, element.href);
                return false; // Prevent default action and stop event propagation
            }
            else
                return true;
        };

        function saveImageAs1(name, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    </script>

    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            </div>
        </form>
    </body>
</html>

Bir Excel sayfası indirilmesi durumunda nasıl çalışmalıdır (tarayıcılar ne yapar)?


7
downloadÖzniteliği.
Šime Vidas

6
Bir dosyanın indirilmesini sağlamanın en iyi yolu, içerik düzenini sunucu tarafında ayarlamaktır, çoğu istemci tarafı çözümü o kadar güvenilir değildir.
adeneo


Sizin için zaten cevaplanmış benzer bir soru var: stackoverflow.com/a/6799284/1948211
dschu

Karl-Andre Gagnon: Lütfen doğru bir şekilde gidin. [HTML 5'i kullanmak istemediğim için etiketlemedim] ve sunucuya dokunmadan
Amit

Yanıtlar:


173

HTML5 kullanarak bağlantılarınıza "indir" özelliğini ekleyebilirsiniz.

<a href="https://stackoverflow.com/path/to/image.png" download>

Uyumlu tarayıcılar daha sonra görüntüyü aynı dosya adıyla (bu örnekte image.png) indirmenizi isteyecektir.

Bu öznitelik için bir değer belirtirseniz, bu yeni dosya adı olur:

<a href="https://stackoverflow.com/path/to/image.png" download="AwesomeImage.png">

GÜNCELLEME: Bu artık mümkün değil ilkbahar 2018 tarihi itibariyle çapraz kökenli için hrefs . Dolayısıyla, <a href="https://i.imgur.com/IskAzqA.jpg" download>imgur.com dışında bir alan adı üzerinde oluşturmak istiyorsanız , amaçlandığı gibi çalışmayacaktır. Chrome'un kullanımdan kaldırılması ve kaldırılması duyurusu


Richard Parnaby-King: HTML 5 özelliğini kullanarak yapılabilir, ancak bunu HTML5 veya herhangi bir SUNUCU TARAFI aracı KULLANMADAN yapmam gerekiyor (eğer mümkünse) Yardımcılar için teşekkürler :)
Amit

2
Henüz tüm tarayıcılarda tam olarak desteklenmiyor, ancak IE veya Safari'yi önemsemiyorsanız bu iyi bir çözümdür. caniuse.com/#feat=download
stacigh

HTML5 çözümü için teşekkürler. Kaydetmeden önce bir dosya adı girmeme izin veren 'farklı kaydet'e nasıl izin verilir?
teleman

Bu dosyanın nereden indirileceğini kontrol edemez miyim? Sadece doğrudan klasörü indirmek için indirilir. Html dosyasının yerel yolunu kullanmasını istiyorum.
Arjun Chiddarwar

1
@ArjunChiddarwar Hayır, bu güvenlik açıklarını açar (birinin kötü amaçlı bir dosyayı doğrudan Windows klasörünüze kaydettiğini hayal edin). İndirme yolu tarayıcı ayarlarına bağlıdır - örneğin varsayılan olarak Chrome, indirilenler klasörünüze indirir.
Richard Parnaby-King

99

Belgeye bir bağlantı ekleyerek bunu Chrome ve Firefox'ta da çalıştırmayı başardım.

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

2
Bu aslında Javascript'in her yerde olduğu web uygulamaları için çok güzel bir çözüm. Yine de yalnızca Google Chrome'da çalışır (test kurulumumda).
Pavel

Uyumluluğu test etmenin bir yolu hakkında bir fikriniz var mı? Bu tekniği kullanmak isterdim ancak diğer tarayıcıları da desteklemem gerekiyor, bu nedenle desteklenmediğinde bir alternatif (yeni bir pencerede PDF açmak veya indirmek için bir bağlantı gibi) sunmam gerekir. Kimsenin bunda şansı var mı?
alexrussell

13
Harika çözüm, teşekkürler! Atlarsanız document.body.appendChild(link)firefox'ta çalışmayacağını unutmayın. Oluşturulan öğeyi document.body.removeChild(link);after ile kaldırmak da iyidirlink.click()
akn

8
en iyi çözüm. DOM kullanımında çöpten kaçınmak içinsetTimeout( function () { link.parentNode.removeChild( link ); },10 );
Mephiztopheles

1
Soru JAVASCRIPT'te nasıl yapılacağını sorduğundan beri seçilen cevap teşekkür olmalıydı.
codehelp4

33

Leeroy ve Richard Parnaby-King:

GÜNCELLEME: 2018 ilkbaharından itibaren bu, çapraz kaynaklı href'ler için artık mümkün değildir. Dolayısıyla, imgur.com dışında bir alan adı üzerinde oluşturmak istiyorsanız, amaçlandığı gibi çalışmayacaktır. Chrome'un kullanımdan kaldırılması ve kaldırılması duyurusu

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

2
görüntü indiriliyor ancak 'Görüntü bozuk' olarak belirtildiği gibi
açılmıyor

20

2018 İlkbahar Güncellemesi

<a href="/path/to/image.jpg" download="FileName.jpg">

Bu hala destekleniyor olsa da, Şubat 2018 itibarıyla Chrome, çapraz kaynak indirme için bu özelliği devre dışı bıraktı, yani bu yalnızca dosya aynı alan adında bulunuyorsa işe yarayacaktır.

Chrome'un web alanları arası indirmeyi devre dışı bırakan yeni güncellemesinden sonra, web alanları arası görüntüleri indirmek için bir geçici çözüm buldum. Bunu ihtiyaçlarınıza uygun bir işleve dönüştürebilirsiniz. Gerekirse biraz daha araştırma yaparak görüntü mime türünü (jpeg, png, gif, vb.) Elde edebilirsiniz. Videolarda buna benzer bir şey yapmanın bir yolu olabilir. Umarım bu birine yardımcı olur!

Leeroy ve Richard Parnaby-King:

GÜNCELLEME: 2018 ilkbaharından itibaren bu, çapraz kaynaklı href'ler için artık mümkün değildir. Dolayısıyla, imgur.com dışında bir alan adı üzerinde oluşturmak istiyorsanız, amaçlandığı gibi çalışmayacaktır. Chrome'un kullanımdan kaldırılması ve kaldırılması duyurusu

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Click image to download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Görünüşe göre bu kod, görüntüyü tarayıcı belleğindeki bir piksel arabelleğine çözüyor, sonra onu jpeg / png / gif olarak yeniden kodluyor ve ardından bunu bir data-uri'ye kapsülliyor ve bu daha sonra yerel olarak depolanacak. Öyleyse, görüntü dosyasındaki tüm meta verilerin kaybolduğu anlamına gelir. Ayrıca yeniden kodlama JPEG bazı kaliteyi kaybeder ve daha kötü kalite / bayt sayısı oranına sahip olur. Yine de bilmek güzel. Paylaşım için teşekkürler.
Stéphane Gourichon

14

Promise ve async / await kullanarak daha modern bir yaklaşım:

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}

sonra

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

Belgeleri burada bulabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


13
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     

5
safari tarayıcısı indirme özelliğini desteklemiyor
Pranav Labhe

11

Bu, sorununuz için genel bir çözümdür. Ancak dosya uzantısının kodlamanızla eşleşmesi gereken çok önemli bir kısım var. Ve tabii ki downlowadImage işlevinin bu içerik parametresi görüntünüzün base64 kodlu dizesi olmalıdır.

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});
a gif image: <image id="img" src="data:image/gif;base64,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" />


<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>


3
Soruyu soran kişiyle alakalı olması için lütfen cevabınıza kısa bir açıklama ekleyin
YAŞ

1
link.href = 'data: application / octet-stream,' + encodeURIComponent (adres) bu, dosyayı bozar ve bu nedenle açılamaz, neden böyle olduğunu önerebilir
OM The Eternity

Evet, bu cevap en iyisi olmayı hak ediyor! Benim için eksik olan kısım, hatalı biçimlendirilmiş veriler üreten ve dosyayı bozan "cleanUrl" şeyiydi.
Iulian Pinzaru

3

2020'de görüntünün yerel kopyasını yapmak için Blob kullanıyorum , hangi tarayıcının dosya olarak indireceği. Bu sitede test edebilirsiniz .

görüntü açıklamasını buraya girin

(function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);

Görünüşe göre bu kod, görüntüyü tarayıcı belleğindeki bir piksel arabelleğine (tuval) deşifre ediyor, sonra onu jpeg / png / gif olarak yeniden kodluyor ve ardından bunu bir data-uri'ye kapsıyor ve bu da daha sonra yerel olarak depolanacak. Öyleyse, görüntü dosyasındaki tüm meta verilerin kaybolduğu anlamına gelir. Ayrıca yeniden kodlama JPEG bazı kaliteyi kaybedecek ve daha kötü bir kalite / bayt sayısı oranına sahip olacaktır. Yine de bilmek güzel. Paylaşım için teşekkürler.
Stéphane Gourichon

2

Bunu dene:

<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>

0
<html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>

0

Bu dosyayı çok fazla kod kullanmadan bağlantı etiketi kullanarak doğrudan indirebilirsiniz .
Snippet'i kopyalayın ve metin düzenleyicinize yapıştırın ve deneyin ...!

<html>
<head>
</head>
<body>
   <div>
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
      <a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
   </div>
</body>
</html>


2
lütfen daha fazla ayrıntı ekleyin, örneğin bu kodun nerede kullanılabileceği.
Maciej S.

-2

.Click () işlevini ve etiketini kullanmaya ne dersiniz?

(Sıkıştırılmış versiyon)

<a id="downloadtag" href="examplefolder/testfile.txt" hidden download></a>

<button onclick="document.getElementById('downloadtag').click()">Download</button>

Şimdi js ile tetikleyebilirsiniz. Ayrıca diğer örnekler, resim ve metin dosyaları gibi açılmıyor!

(js işlevi sürümü)

function download(){
document.getElementById('downloadtag').click();
}
<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>


-5

onu buldum

<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>

benim için çalışmadı. Neden olduğundan emin değilim.

?download=trueİndirmeye zorlamak için bağlantınızın sonuna bir parametre ekleyebileceğinizi buldum . Sanırım bu tekniğin Google Drive tarafından kullanıldığını fark ettim.

Bağlantınıza şunları ekleyin ?download=truehref'inizin sonuna ekleyin.

Bu tekniği aynı zamanda dosya adını ayarlamak için de kullanabilirsiniz.

Bağlantınıza ?download=true&filename=My_Image_File.jpeghref'inizin sonuna ekleyin.


2
? download = true, sunucusuna resmi indirmek için doğru başlığı göndermesini söylemek üzere Google Drive'a iletilir. Özel olarak bu şekilde kurulmadığı sürece başka herhangi bir ortamda işe yarayacak bir şey değildir.
muncherelli

-15

Bunu yapmak için js yazmanıza gerek yok, sadece şunu kullanın:

<a href="path_to/image.jpg" alt="something">Download image</a>

Ve tarayıcının kendisi resmi otomatik olarak indirecektir.

Herhangi bir nedenle işe yaramazsa, indirme özelliğini ekleyin. Bu öznitelik ile indirilebilir dosya için bir isim belirleyebilirsiniz:

<a href="path_to/image.jpg" download="myImage">Download image</a>

Tarayıcınız farklı bir şekilde yapılandırılmadıkça, görüntünün bağlantısı görüntüyü yalnızca aynı pencerede açacaktır. downloadNitelik tüm tarayıcılarda desteklenmez.
Tasarım Adrian
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.