Paksa browser untuk mengunduh file gambar saat diklik

100

Saya memerlukan browser untuk mendownload file gambar seperti saat mengklik lembar Excel.

Apakah ada cara untuk melakukan ini hanya dengan menggunakan pemrograman sisi klien?

<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>

Bagaimana cara kerjanya jika mengunduh lembar Excel (apa yang dilakukan browser)?

javascript jquery html Amit
sumber

7

The downloadatribut.

Šime Vidas

6

Cara terbaik untuk memastikan unduhan file adalah dengan mengatur disposisi konten di sisi server, sebagian besar solusi sisi klien tidak dapat diandalkan.

adeneo

1

Kemungkinan duplikat: stackoverflow.com/questions/2408146/… ?

Karl-André Gagnon

Ada pertanyaan serupa yang sudah terjawab untuk Anda: stackoverflow.com/a/6799284/1948211

dschu

Karl-Andre Gagnon: Silakan buka dengan benar. [Saya belum menandai HTML 5 karena saya tidak ingin menggunakannya] dan tanpa menyentuh server

Amit

172

Menggunakan HTML5 Anda dapat menambahkan atribut 'download' ke link Anda.

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

Browser yang sesuai kemudian akan meminta untuk mengunduh gambar dengan nama file yang sama (dalam contoh ini image.png).

Jika Anda menentukan nilai untuk atribut ini, maka itu akan menjadi nama file baru:

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

UPDATE: Pada musim semi 2018 ini tidak mungkin lagi untuk cross-asal hrefs . Jadi jika Anda ingin membuat <a href="https://i.imgur.com/IskAzqA.jpg" download>di domain selain imgur.com itu tidak akan berfungsi sebagaimana mestinya. Pengumuman penghentian dan penghapusan Chrome

Richard Parnaby-King
sumber

Richard Parnaby-King: Menggunakan atribut HTML 5 itu dapat dilakukan, tetapi saya harus melakukannya TANPA menggunakan HTML5 atau alat SIDE SERVER (jika memungkinkan) Terima kasih untuk pembantu :)

Amit

2

Belum sepenuhnya didukung di semua browser tetapi ini adalah solusi yang baik jika Anda tidak peduli dengan IE atau Safari. caniuse.com/#feat=download

stacigh

Terima kasih, untuk solusi HTML5. Bagaimana cara mengizinkan 'simpan sebagai' yang memungkinkan saya memasukkan nama file sebelum menyimpan?

teleman

Tidak dapatkah saya mengontrol di mana file ini harus diunduh? Itu hanya mengunduh untuk mengunduh folder secara langsung. Saya ingin menggunakan jalur lokal file html.

Arjun Chiddarwar

1

@ArjunChiddarwar Tidak, itu membuka kerentanan keamanan (bayangkan seseorang menyimpan file berbahaya langsung ke folder Windows Anda). Jalur unduhan didasarkan pada pengaturan browser - misalnya secara default Chrome akan mengunduh ke folder unduhan Anda.

Richard Parnaby-King

96

Saya berhasil mendapatkan ini berfungsi di Chrome dan Firefox juga dengan menambahkan tautan ke dokumen.

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

DrowsySaturn
sumber

2

Ini sebenarnya adalah solusi yang sangat bagus untuk aplikasi web di mana Javascript ada di mana-mana. Hanya bekerja di Google Chrome (dalam pengaturan pengujian saya).

Pavel

Adakah ide tentang cara menguji kompatibilitas? Saya ingin menggunakan teknik ini tetapi perlu juga mendukung browser lain, jadi saya perlu menawarkan alternatif (seperti membuka PDF di jendela baru, atau tautan untuk mengunduh) bila ini tidak didukung. Adakah yang beruntung dengan itu?

alexrussell

13

Solusi hebat, terima kasih! Perhatikan bahwa jika Anda menghilangkannya, document.body.appendChild(link)itu tidak akan berfungsi di firefox. Ini juga bagus untuk menghapus elemen yang dibuat dengan document.body.removeChild(link);afterlink.click()

akn

8

solusi terbaik. Untuk menghindari sampah dalam penggunaan DOMsetTimeout( function () { link.parentNode.removeChild( link ); },10 );

Mephiztopheles

1

Terima kasih seharusnya menjadi jawaban yang dipilih sejak pertanyaan menanyakan bagaimana melakukannya di JAVASCRIPT.

codehelp4

33

Leeroy & Richard Parnaby-King:

PEMBARUAN: Mulai musim semi 2018, hal ini tidak lagi memungkinkan untuk href lintas sumber. Jadi jika Anda ingin membuat di domain selain imgur.com itu tidak akan berfungsi sebagaimana mestinya. Pengumuman penghentian dan penghapusan Chrome

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();
}

iXs
sumber

2

unduhan gambar tetapi tidak terbuka karena dinyatakan 'Gambar rusak'

picacode

19

Perbarui Musim Semi 2018

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

Meskipun ini masih didukung, mulai Februari 2018 chrome menonaktifkan fitur ini untuk pengunduhan lintas sumber yang berarti ini hanya akan berfungsi jika file berada di nama domain yang sama.

Saya menemukan solusi untuk mengunduh gambar lintas domain setelah pembaruan baru Chrome yang menonaktifkan unduhan lintas domain. Anda dapat memodifikasinya menjadi fungsi yang sesuai dengan kebutuhan Anda. Anda mungkin bisa mendapatkan gambar jenis mime (jpeg, png, gif, dll) dengan beberapa penelitian lebih lanjut jika perlu. Mungkin ada cara untuk melakukan hal serupa dengan video ini juga. Semoga ini bisa membantu seseorang!

Leeroy & Richard Parnaby-King:

PEMBARUAN: Mulai musim semi 2018, hal ini tidak lagi memungkinkan untuk href lintas sumber. Jadi jika Anda ingin membuat di domain selain imgur.com itu tidak akan berfungsi sebagaimana mestinya. Pengumuman penghentian dan penghapusan Chrome

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>

Luaskan cuplikan

Riley Bell
sumber

Sepertinya kode ini menerjemahkan gambar menjadi buffer piksel dalam memori browser, kemudian mengkodekan ulang sebagai jpeg / png / gif kemudian merangkumnya ke dalam data-uri yang kemudian disimpan secara lokal. Jika demikian, berarti semua metadata dari file gambar tersebut hilang. Juga encoding ulang JPEG akan kehilangan beberapa kualitas dan memiliki kualitas / rasio jumlah byte yang lebih buruk. Tetap saja, senang mengetahuinya. Terima kasih telah berbagi.

Stéphane Gourichon

14

Pendekatan yang lebih modern menggunakan Promise dan async / await:

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

kemudian

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);
}

Temukan dokumentasi di sini: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Emerica
sumber

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);

Sadi
sumber

5

browser safari tidak mendukung atribut unduhan

Pranav Labhe

11

Ini adalah solusi umum untuk masalah Anda. Tetapi ada satu bagian yang sangat penting bahwa ekstensi file harus cocok dengan pengkodean Anda. Dan tentu saja, parameter konten dari fungsi downlowadImage harus berupa string berenkode base64 dari gambar Anda.

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,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" />


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

Luaskan cuplikan

hakobpogh.dll
sumber

3

Harap tambahkan penjelasan singkat pada jawaban Anda, untuk membuatnya relevan bagi orang yang menanyakannya

USIA

1

link.href = 'data: application / octet-stream,' + encodeURIComponent (alamat) ini merusak file dan karenanya tidak dapat dibuka, canu menyarankan mengapa begitu

OM The Eternity

Ya, jawaban ini pantas menjadi yang terbaik! Bagian yang hilang bagi saya adalah hal "cleanUrl", yang menghasilkan data dalam format yang salah dan memecahkan file.

Iulian Pinzaru

3

Pada tahun 2020 saya menggunakan Blob untuk membuat salinan gambar lokal, yang akan diunduh browser sebagai file. Anda bisa mengujinya di situs ini .

(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);

Petr Tripolsky
sumber

Sepertinya kode ini menerjemahkan gambar menjadi penyangga piksel (kanvas) di memori browser, lalu mengenkode ulangnya sebagai jpeg / png / gif lalu merangkumnya menjadi data-uri yang kemudian diharapkan disimpan secara lokal. Jika demikian, berarti semua metadata dari file gambar tersebut hilang. Juga encoding ulang JPEG akan kehilangan beberapa kualitas dan memiliki kualitas / rasio jumlah byte yang lebih buruk. Tetap saja, senang mengetahuinya. Terima kasih telah berbagi.

Stéphane Gourichon

2

Coba ini:

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

Muhammad Awais
sumber

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>

Engr Zardari
sumber

0

Anda bisa langsung mendownload file ini menggunakan anchor tag tanpa banyak kode.
Salin cuplikan dan tempel di editor teks Anda dan coba ...!

<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>

Luaskan cuplikan

vinod
sumber

2

tolong tambahkan detail lebih lanjut, misalnya di mana kode ini dapat digunakan.

Maciej S.

-2

Bagaimana dengan menggunakan fungsi .click () dan tag?

(Versi terkompresi)

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

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

Luaskan cuplikan

Sekarang Anda dapat memicunya dengan js. Itu juga tidak terbuka, seperti contoh lain, file gambar dan teks!

(versi js-function)

function download(){
document.getElementById('downloadtag').click();
}

<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>

Luaskan cuplikan

Bisikan Beracun
sumber

-5

Saya menemukan itu

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

tidak bekerja untuk saya. Saya tidak yakin kenapa.

Saya telah menemukan bahwa Anda dapat menyertakan ?download=trueparameter di akhir tautan Anda untuk memaksa unduhan. Saya rasa saya memperhatikan teknik ini digunakan oleh Google Drive.

Di link Anda, sertakan ?download=truedi bagian akhir href Anda.

Anda juga dapat menggunakan teknik ini untuk menyetel nama file pada saat yang bersamaan.

Di link Anda, sertakan ?download=true&filename=My_Image_File.jpegdi bagian akhir href Anda.

Mufasa
sumber

2

? download = true diteruskan ke Google Drive untuk memberi tahu server mereka agar mengirimkan header yang benar untuk mendownload gambar. Ini bukanlah sesuatu yang akan berhasil di lingkungan lain kecuali secara khusus diatur seperti itu.

muncherelli

-15

Anda tidak perlu menulis js untuk melakukannya, cukup gunakan:

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

Dan browser itu sendiri akan mendownload gambar secara otomatis.

Jika karena alasan tertentu tidak berhasil tambahkan atribut download. Dengan atribut ini, Anda dapat menetapkan nama untuk file yang dapat diunduh:

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

António Regadas
sumber

Tautan ke gambar hanya akan membuka gambar di jendela yang sama, kecuali browser Anda dikonfigurasi secara berbeda. The downloadatribut tidak didukung di semua browser.

Desain oleh Adrian

Paksa browser untuk mengunduh file gambar saat diklik

Jawaban: