บังคับให้เบราว์เซอร์ดาวน์โหลดไฟล์ภาพเมื่อคลิก


106

ฉันต้องการเบราว์เซอร์เพื่อดาวน์โหลดไฟล์ภาพเช่นเดียวกับที่ทำขณะคลิกบนแผ่นงาน Excel

มีวิธีดำเนินการโดยใช้โปรแกรมฝั่งไคลเอ็นต์เท่านั้นหรือไม่?

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

จะทำงานอย่างไรในกรณีดาวน์โหลดแผ่นงาน Excel (เบราว์เซอร์ทำอะไร)


7
downloadแอตทริบิวต์
Šime Vidas

6
วิธีที่ดีที่สุดในการตรวจสอบการดาวน์โหลดไฟล์คือการตั้งค่าการจัดการเนื้อหาบนเซิร์ฟเวอร์โซลูชันไคลเอนต์ส่วนใหญ่ไม่น่าเชื่อถือ
adeneo

1
อาจซ้ำกันได้: stackoverflow.com/questions/2408146/… ?
Karl-André Gagnon

มีคำถามที่คล้ายกันซึ่งมีคำตอบสำหรับคุณอยู่แล้ว: stackoverflow.com/a/6799284/1948211
dschu

Karl-Andre Gagnon: กรุณาผ่านมันไปอย่างเหมาะสม [ฉันไม่ได้ติดแท็ก HTML 5 เพราะฉันไม่ต้องการใช้] และไม่มีเซิร์ฟเวอร์สัมผัส
Amit

คำตอบ:


178

การใช้ HTML5 คุณสามารถเพิ่มแอตทริบิวต์ "ดาวน์โหลด" ลงในลิงก์ของคุณ

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

จากนั้นเบราว์เซอร์ที่เข้ากันได้จะแจ้งให้ดาวน์โหลดรูปภาพที่มีชื่อไฟล์เดียวกัน (ในตัวอย่างนี้ image.png)

หากคุณระบุค่าสำหรับแอตทริบิวต์นี้จะกลายเป็นชื่อไฟล์ใหม่:

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

UPDATE:ในฐานะที่เป็นของฤดูใบไม้ผลิ 2018 นี้เป็นไปไม่ได้สำหรับข้ามกำเนิดhref s ดังนั้นหากคุณต้องการสร้าง<a href="https://i.imgur.com/IskAzqA.jpg" download>บนโดเมนอื่นที่ไม่ใช่ imgur.com มันจะไม่ทำงานตามที่ตั้งใจไว้ ประกาศการเลิกใช้งานและการลบ Chrome


Richard Parnaby-King: การใช้แอตทริบิวต์ HTML 5 สามารถทำได้ แต่ต้องทำโดยไม่ต้องใช้ HTML5 หรือเครื่องมือ SERVER SIDE ใด ๆ (ถ้าทำได้) ขอบคุณสำหรับผู้ช่วยเหลือ :)
Amit

2
ยังไม่ได้รับการสนับสนุนอย่างสมบูรณ์ในทุกเบราว์เซอร์ แต่เป็นทางออกที่ดีหากคุณไม่สนใจ IE หรือ Safari caniuse.com/#feat=download
stacigh

ขอบคุณสำหรับโซลูชัน HTML5 ยังคงอนุญาตให้ 'บันทึกเป็น' ที่ให้ฉันป้อนชื่อไฟล์ก่อนบันทึกได้อย่างไร
teleman

ฉันควบคุมไม่ได้ว่าจะดาวน์โหลดไฟล์นี้ที่ไหน? เพียงแค่ดาวน์โหลดเพื่อดาวน์โหลดโฟลเดอร์โดยตรง ฉันต้องการให้ใช้เส้นทางภายในของไฟล์ html
Arjun Chiddarwar

1
@ArjunChiddarwar ไม่ใช่ที่เปิดช่องโหว่ด้านความปลอดภัย (ลองนึกภาพว่ามีคนบันทึกไฟล์ที่เป็นอันตรายลงในโฟลเดอร์ Windows ของคุณโดยตรง) เส้นทางการดาวน์โหลดจะขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ตัวอย่างเช่นโดยค่าเริ่มต้น Chrome จะดาวน์โหลดไปยังโฟลเดอร์ดาวน์โหลดของคุณ
Richard Parnaby-King

101

ฉันจัดการเพื่อให้สิ่งนี้ใช้งานได้ใน Chrome และ Firefox ด้วยโดยการต่อท้ายลิงก์ไปยังเอกสาร

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

2
นี่เป็นทางออกที่ดีมากสำหรับเว็บแอปที่ Javascript อยู่ทั่วทุกที่ ใช้งานได้เฉพาะใน Google Chrome (ในการตั้งค่าการทดสอบของฉัน) แม้ว่า
Pavel

มีแนวคิดเกี่ยวกับวิธีทดสอบความเข้ากันได้หรือไม่? ฉันต้องการใช้เทคนิคนี้ แต่ต้องรองรับเบราว์เซอร์อื่นด้วยดังนั้นจึงต้องเสนอทางเลือกอื่น (เช่นเปิด PDF ในหน้าต่างใหม่หรือลิงก์สำหรับดาวน์โหลด) เมื่อไม่รองรับ มีใครโชคดีบ้างไหม?
alexrussell

13
ทางออกที่ดีขอบคุณ! โปรดทราบว่าหากคุณละdocument.body.appendChild(link)ไว้มันจะไม่ทำงานใน firefox นอกจากนี้ยังเป็นการดีที่จะลบองค์ประกอบที่สร้างขึ้นด้วยdocument.body.removeChild(link);afterlink.click()
akn

8
ทางออกที่ดีที่สุด เพื่อหลีกเลี่ยงขยะในการใช้ DOMsetTimeout( function () { link.parentNode.removeChild( link ); },10 );
Mephiztopheles

1
ขอบคุณควรเป็นคำตอบที่เลือกไว้ตั้งแต่คำถามที่ถามว่าจะทำอย่างไรใน JAVASCRIPT
codehelp4

35

Leeroy และ Richard Parnaby-King:

อัปเดต: ในฤดูใบไม้ผลิ 2018 จะไม่สามารถใช้ hrefs แบบ cross-origin ได้อีกต่อไป ดังนั้นหากคุณต้องการสร้างบนโดเมนอื่นที่ไม่ใช่ imgur.com มันจะไม่ทำงานตามที่ตั้งใจไว้ ประกาศการเลิกใช้งานและการลบ 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();
}

2
ดาวน์โหลดภาพ แต่ไม่เปิดขึ้นตามที่ระบุไว้ 'ภาพเสีย'
picacode

สมบูรณ์แบบ! ทำงานให้ฉัน
Taffarel Xavier

21

อัปเดตฤดูใบไม้ผลิ 2018

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

แม้ว่าจะยังคงได้รับการสนับสนุน แต่ ณ เดือนกุมภาพันธ์ 2018 chrome ปิดใช้งานคุณลักษณะนี้สำหรับการดาวน์โหลดข้ามแหล่งที่มาซึ่งหมายความว่าจะใช้งานได้ก็ต่อเมื่อไฟล์อยู่ในชื่อโดเมนเดียวกัน

ฉันพบวิธีแก้ปัญหาสำหรับการดาวน์โหลดภาพข้ามโดเมนหลังจากการอัปเดตใหม่ของ Chrome ซึ่งปิดใช้งานการดาวน์โหลดข้ามโดเมน คุณสามารถปรับเปลี่ยนสิ่งนี้ให้เป็นฟังก์ชันตามความต้องการของคุณได้ คุณอาจจะได้รับภาพประเภท mime (jpeg, png, gif, ฯลฯ ) พร้อมกับการค้นคว้าเพิ่มเติมหากต้องการ อาจมีวิธีทำสิ่งที่คล้ายกันนี้กับวิดีโอเช่นกัน หวังว่านี่จะช่วยใครสักคน!

Leeroy และ Richard Parnaby-King:

อัปเดต: ในฤดูใบไม้ผลิปี 2018 จะไม่สามารถใช้ hrefs แบบ cross-origin ได้อีกต่อไป ดังนั้นหากคุณต้องการสร้างบนโดเมนอื่นที่ไม่ใช่ imgur.com มันจะไม่ทำงานตามที่ตั้งใจไว้ ประกาศการเลิกใช้งานและการลบ 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>


ดูเหมือนว่ารหัสนี้จะถอดรหัสภาพเป็นบัฟเฟอร์พิกเซลในหน่วยความจำของเบราว์เซอร์จากนั้นเข้ารหัสใหม่เป็น jpeg / png / gif จากนั้นจะห่อหุ้มสิ่งนั้นลงใน data-uri ซึ่งหวังว่าจะถูกเก็บไว้ในเครื่อง หากเป็นเช่นนั้นแสดงว่าข้อมูลเมตาทั้งหมดจากไฟล์ภาพสูญหาย การเข้ารหัส JPEG ใหม่จะสูญเสียคุณภาพบางส่วนและมีคุณภาพที่แย่ลง / อัตราส่วนจำนวนไบต์ ยังดีที่ได้รู้ ขอบคุณสำหรับการแบ่งปัน.
Stéphane Gourichon

14
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
เบราว์เซอร์ซาฟารีไม่รองรับแอตทริบิวต์การดาวน์โหลด
Pranav Labhe

14

แนวทางที่ทันสมัยกว่าโดยใช้ Promise และ async / await:

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

แล้ว

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

ค้นหาเอกสารที่นี่: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


11

นี่เป็นวิธีแก้ปัญหาทั่วไปสำหรับปัญหาของคุณ แต่มีส่วนหนึ่งที่สำคัญมากที่นามสกุลไฟล์ควรตรงกับการเข้ารหัสของคุณ และแน่นอนว่าพารามิเตอร์เนื้อหาของฟังก์ชัน downlowadImage ควรเป็นสตริงที่เข้ารหัส base64 ของรูปภาพของคุณ

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
โปรดเพิ่มคำอธิบายสั้น ๆ ในคำตอบของคุณเพื่อให้ตรงกับผู้ที่ถาม
อายุ

1
link.href = 'data: application / octet-stream,' + encodeURIComponent (address) สิ่งนี้ทำให้ไฟล์เสียหายและไม่สามารถเปิดได้จึงขอแนะนำว่าทำไมจึงเป็นเช่นนั้น
OM The Eternity

ใช่คำตอบนี้สมควรเป็นคำตอบที่ดีที่สุด! ส่วนที่ขาดหายไปสำหรับฉันคือ "cleanUrl" ซึ่งสร้างข้อมูลที่ผิดรูปแบบและทำให้ไฟล์เสียหาย
Iulian Pinzaru

3

ในปี 2020 ฉันใช้Blobเพื่อสร้างสำเนารูปภาพในเครื่องซึ่งเบราว์เซอร์จะดาวน์โหลดเป็นไฟล์ คุณสามารถทดสอบได้ในไซต์นี้

ป้อนคำอธิบายภาพที่นี่

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

ดูเหมือนว่ารหัสนี้จะถอดรหัสภาพเป็นบัฟเฟอร์พิกเซล (ผ้าใบ) ในหน่วยความจำของเบราว์เซอร์จากนั้นเข้ารหัสใหม่เป็น jpeg / png / gif จากนั้นจะห่อหุ้มสิ่งนั้นลงใน data-uri ซึ่งหวังว่าจะถูกเก็บไว้ในเครื่อง หากเป็นเช่นนั้นแสดงว่าข้อมูลเมตาทั้งหมดจากไฟล์ภาพสูญหาย การเข้ารหัส JPEG ใหม่จะสูญเสียคุณภาพบางส่วนและมีคุณภาพที่แย่ลง / อัตราส่วนจำนวนไบต์ ยังดีที่ได้รู้ ขอบคุณสำหรับการแบ่งปัน.
Stéphane Gourichon


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

คุณสามารถดาวน์โหลดไฟล์นี้ได้โดยตรงโดยใช้แท็กจุดยึดโดยไม่ต้องใช้รหัสมากนัก
คัดลอกข้อมูลโค้ดและวางในโปรแกรมแก้ไขข้อความของคุณแล้วลอง ... !

<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
โปรดเพิ่มรายละเอียดเพิ่มเติมเช่นรหัสนี้สามารถใช้ได้ที่ไหน
Maciej S.

-3

สิ่งที่เกี่ยวกับการใช้ฟังก์ชัน. click () และแท็ก?

(เวอร์ชันบีบอัด)

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

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

ตอนนี้คุณสามารถทริกเกอร์ได้ด้วย js นอกจากนี้ยังไม่เปิดเช่นเดียวกับตัวอย่างอื่น ๆ ไฟล์รูปภาพและข้อความ!

(เวอร์ชัน js-function)

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


-5

ฉันพบว่า

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

ไม่ได้ผลสำหรับฉัน ฉันไม่แน่ใจว่าทำไม

ฉันพบว่าคุณสามารถใส่ไฟล์ ?download=trueพารามิเตอร์ที่ท้ายลิงก์เพื่อบังคับให้ดาวน์โหลดได้ ฉันคิดว่าฉันสังเกตเห็นเทคนิคนี้ถูกใช้โดย Google ไดรฟ์

ในลิงค์ของคุณรวม ?download=trueไว้ที่ส่วนท้ายของ href

คุณยังสามารถใช้เทคนิคนี้เพื่อตั้งชื่อไฟล์ได้ในเวลาเดียวกัน

ในลิงค์ของคุณรวม?download=true&filename=My_Image_File.jpegไว้ที่ส่วนท้ายของ href


2
? download = true จะถูกส่งไปยัง Google Drive เพื่อบอกให้เซิร์ฟเวอร์ของพวกเขาส่งส่วนหัวที่ถูกต้องเพื่อดาวน์โหลดรูปภาพ ไม่ใช่สิ่งที่จะใช้งานได้ในสภาพแวดล้อมอื่น ๆ เว้นแต่จะได้รับการจัดตั้งขึ้นโดยเฉพาะ
muncherelli

-16

คุณไม่จำเป็นต้องเขียน js เพื่อทำสิ่งนั้นเพียงใช้:

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

และเบราว์เซอร์เองจะดาวน์โหลดภาพโดยอัตโนมัติ

หากเหตุผลบางประการไม่ได้ผลให้เพิ่มแอตทริบิวต์การดาวน์โหลด ด้วยแอตทริบิวต์นี้คุณสามารถตั้งชื่อสำหรับไฟล์ที่ดาวน์โหลดได้:

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

ลิงก์ไปยังรูปภาพจะเปิดรูปภาพในหน้าต่างเดียวกันเท่านั้นเว้นแต่ว่าเบราว์เซอร์ของคุณจะกำหนดค่าต่างกัน downloadแอตทริบิวต์ไม่สนับสนุนในเบราว์เซอร์
ออกแบบโดย Adrian
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.