วิธีทริกเกอร์การดาวน์โหลดไฟล์เมื่อคลิกปุ่ม HTML หรือ JavaScript

434

มันบ้าไปแล้ว แต่ฉันไม่รู้วิธีการทำเช่นนี้และเพราะคำทั่วไปเป็นอย่างไรมันยากที่จะค้นหาสิ่งที่ฉันต้องการในเครื่องมือค้นหา ฉันคิดว่านี่น่าจะเป็นคำตอบที่ง่าย

ฉันต้องการดาวน์โหลดไฟล์อย่างง่ายซึ่งจะทำเช่นนี้:

<a href="file.doc">Download!</a>

แต่ฉันต้องการใช้ปุ่ม HTML เช่นอย่างใดอย่างหนึ่งเหล่านี้:

<input type="button" value="Download!">
<button>Download!</button>

ในทำนองเดียวกันเป็นไปได้ไหมที่จะเรียกใช้การดาวน์โหลดอย่างง่ายผ่าน JavaScript

$("#fileRequest").click(function(){ /* code to download? */ });

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

javascript html download

— brentonstrine
แหล่งที่มา

15

ขอบคุณที่คุณ "วิธีเรียกไฟล์ที่ดาวน์โหลดในจาวาสคริปต์" จะให้คำตอบที่รวดเร็วยิ่งขึ้นสำหรับผู้ค้นหาในอนาคต

— Danubian Sailor

278

สำหรับปุ่มที่คุณสามารถทำได้

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

— Cfreak
แหล่งที่มา

คุณสามารถบันทึกแท็กฟอร์มและเพียงเพิ่ม onclick ไปที่แท็กปุ่ม

— Florian Leitgeb

12

ไม่ทำงานเป็นทริกเกอร์เพียงเปลี่ยนเส้นทางไปยัง URL เป็นแท็ก 'a'

— fdrv

7

วิธีนี้ใช้งานได้ดีกว่า: <a href="path_to_file" download="proposed_file_name"> ดาวน์โหลด </a>

— kscius

11

@kscius แม้กระทั่งทุกวันนี้แอตทริบิวต์การดาวน์โหลดไม่รองรับใน IE 11 (ตอนนี้รองรับใน Edge) และไม่รองรับ Safari ในปี 2012 เมื่อคำตอบถูกโพสต์ครั้งแรกมันไม่ได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญใด ๆ

— Cfreak

1

ความแตกต่างระหว่างการยึดกับปุ่มจัดแต่งทรงผมและมีแบบฟอร์มด้วยปุ่มคืออะไร?

— Andrei Epure

444

คุณสามารถทริกเกอร์การดาวน์โหลดด้วยdownloadคุณสมบัติHTML5

<a href="path_to_file" download="proposed_file_name">Download</a>

ที่ไหน:

path_to_fileเป็นเส้นทางที่มีมติให้การ URL ในแหล่งกำเนิดเดียวกัน นั่นหมายความว่าหน้าและไฟล์จะต้องใช้โดเมนโดเมนย่อยโปรโตคอลเดียวกัน (HTTP กับ HTTPS) และพอร์ต (ถ้าระบุ) ข้อยกเว้นคือblob:และdata:(ซึ่งใช้ได้เสมอ) และfile:(ซึ่งไม่เคยทำงาน)
proposed_file_nameเป็นชื่อไฟล์ที่จะบันทึก หากว่างเปล่าเบราว์เซอร์จะใช้ค่าเริ่มต้นเป็นชื่อของไฟล์

เอกสารประกอบ: MDN , HTML มาตรฐานในการดาวน์โหลด , เปิดHTML Standarddownload , CanIUse

— Joe Pigott
แหล่งที่มา

37

ไม่ทำงานกับ Safari และ IE บางรุ่น

— Mohamed Hussain

4

การใช้การรวมกันของdownloadและtarget="_blank"ดูเหมือนว่าจะเพียงพอที่จะครอบคลุมกรณีการใช้งานส่วนใหญ่ เบราว์เซอร์ที่เข้าใจdownloadจะถือว่าเป็นการดาวน์โหลดไม่เช่นนั้นจะเปิดในแท็บใหม่

— MK10

10

สิ่งนี้จะนำไปใช้กับวัตถุปุ่มแทนที่จะเป็นแค่แท็กได้อย่างไร

— storm_m2138

8

จริงๆแล้วสิ่งนี้ใช้ได้กับ URL ของแหล่งกำเนิดเดียวกันตามที่กล่าวไว้ในเอกสาร MDN นี่เป็นข้อ จำกัด อย่างมากหากเรากำลังมองหาที่จะพัฒนาวิธีการแก้ปัญหาแบบทั่วไป

— Akshat Gupta

6

คำถามคือขอให้ใช้ปุ่มแทนการเชื่อมโยง

— Quentin

86

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

— sleepyup
แหล่งที่มา

8

ทางออกที่ดีที่สุดและสะอาดที่สุด แต่คุณไม่จำเป็นต้องมี Javascript เพิ่มเติมใด ๆ ที่นี่ ส่วน HTML กับ onclick ก็เพียงพอแล้ว

— Florian Leitgeb

4

จะทำอย่างไรถ้าฉันต้องการดาวน์โหลดไฟล์ xml

— g07kore

2

ขอบคุณสำหรับรหัสของคุณ ฉันได้ทำการทดสอบแล้วมันสามารถทำงานได้ใน IE, Chrome, Firefox

— muthukumar

6

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

— WindRider

1

window.open สามารถกระตุ้นการบล็อกป๊อปอัปในเบราว์เซอร์และไม่แนะนำ คุณสามารถใช้ window.location = 'path' ได้แม้ว่าจะไปยังตำแหน่งในหน้าต่างเบราว์เซอร์เดียวกัน

— Elendurwen

68

ด้วย jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

— แมตต์บอล
แหล่งที่มา

1

สมบูรณ์แบบขอบคุณ คุณรู้หรือไม่ว่าเซิร์ฟเวอร์ส่วนใหญ่จะตั้งค่าการจัดการเนื้อหาเป็น 'สิ่งที่แนบ' ตามค่าเริ่มต้นหรือไม่

— brentonstrine

5

ไม่มี "ส่วนใหญ่" มันสมบูรณ์ขึ้นอยู่กับ อย่าพึ่งพามันถูกตั้งค่า

— Matt Ball

3

ปัญหานี้ทำให้ฉันโกรธและเป็นตัวเลือกเดียวที่ทำงานได้ (และได้รับการสนับสนุนโดย IE) ฉันจะเพิ่มสำหรับ n00bs ใด ๆ เช่นฉันว่าการตั้งค่าการจัดการเนื้อหาสิ่งที่คุณต้องทำคือ: <? php header ('เนื้อหาการจัดการ -: สิ่งที่แนบมา; filename = "filename.here"'); ?>

— user124384

3

ไม่มี jquery ระยะเวลา

— Adam Arold

1

วิธีนี้ใช้ได้ผลถ้าคุณพยายามดาวน์โหลดภาพมันจะเปิดภาพในเบราว์เซอร์

— Dheeraj

34

เธรดเก่า แต่ไม่มีโซลูชัน js อย่างง่าย:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

— Stefanos Chrs
แหล่งที่มา

24

@NicholasKyriakides ชนิดนี้ทำให้ฉันนึกถึงอัญมณีนี้: image.ibb.co/dtkUWJ/Selection_002.png

— Stefanos Chrs

@BryanLarsen FF รุ่นใด

— Stefanos Chrs

1

@BryanLarsen คุณถูกต้อง Firefox ไม่อนุญาตสิ่งนี้โดยไม่เพิ่มองค์ประกอบลงในเนื้อหา ขอขอบคุณอัปเดตคำตอบ

— Stefanos Chrs

1

มีวิธีที่เรียกใช้ฟังก์ชันจาวาสคริปต์เมื่อการดาวน์โหลดเสร็จสิ้นหรือไม่? เพียงแค่พยายามแสดงข้อความเมื่อการดาวน์โหลดเริ่มต้นและลบข้อความเมื่อการดาวน์โหลดเสร็จสิ้น

— mohit bansal

1

@mohitbansal (un) โชคดีที่มันอยู่ในระดับเบราว์เซอร์

— Stefanos Chrs

23

คุณสามารถทำได้ด้วย "เคล็ดลับ" ด้วย iframe ที่มองไม่เห็น เมื่อคุณตั้งค่า "src" เป็นเบราว์เซอร์จะตอบสนองราวกับว่าคุณคลิกลิงก์ที่มี "href" เหมือนกัน ตรงกันข้ามกับโซลูชันที่มีรูปแบบจะช่วยให้คุณสามารถฝังตรรกะเพิ่มเติมเช่นการเปิดใช้งานการดาวน์โหลดหลังจากหมดเวลาเมื่อตรงตามเงื่อนไขบางประการเป็นต้น

นอกจากนี้ยังเป็น silient มากมีไม่กระพริบหน้าต่าง / window.openแท็บใหม่เช่นเมื่อใช้

HTML:

<iframe id="invisible" style="display:none;"></iframe>

javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

— กะลาสี Danubian
แหล่งที่มา

อย่างน้อยถ้าคุณใช้ iframe กับ document.body จริงๆ

— yxhuvud

1

ดูเหมือนจะไม่สามารถใช้งานได้ใน Chrome ในตอนนี้แม้ว่าจะเคยใช้งานได้ก็ตาม ฉันสงสัยว่า Chrome หยุดทำงานเป็นระยะ ๆ หรือไม่

— Dobes Vandermeer

ใช้งานได้ใน Chrome ตั้งแต่เวอร์ชัน 61.0.3163.100 (รุ่นเป็นทางการ) (64 บิต)

— AndrewBenjamin

ไม่ทำงานกับรูปภาพใน Firefox v57 มันเป็นเพียงการแสดงรูปภาพใน iframe

— แอนโทนี

15

เวอร์ชั่น Bootstrap

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

จัดทำเป็นเอกสารใน Bootstrap 4 เอกสารและทำงานใน Bootstrap 3 เช่นกัน

— สนับสนุน CFP
แหล่งที่มา

9

สิ่งเดียวที่เกี่ยวข้องกับ Bootstrap คือชื่อคลาสมันเป็นพลังของ HTML5

— Machado

3

คำถามคือถามอย่างชัดเจนว่าจะทำอย่างไรกับปุ่มแทนลิงค์

— เควนติน

2

หากคุณรู้อะไรเกี่ยวกับ bootstrap คุณจะเห็นว่ามันเป็นปุ่ม

— John Lord

11

ฉันคิดว่านี่เป็นวิธีที่คุณมองหา

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

ฉันซ่อนกรณีที่ Javascript ของฉันสร้างไฟล์ CSV เนื่องจากไม่มี URL ระยะไกลเพื่อดาวน์โหลดฉันจึงใช้การติดตั้งต่อไปนี้

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

— Delconis
แหล่งที่มา

บน 404 -> หน้าเปลี่ยนเป็นหน้าข้อผิดพลาด 404 ปัญหาเดียวกับที่ระบุไว้ในการlocation.hrefแก้ปัญหาอื่น ๆ

— BananaAcid

9

เกี่ยวกับ:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

— Olli
แหล่งที่มา

5

สิ่งนี้ใช้ไม่ได้หากไฟล์ของคุณเป็นรูปภาพเพราะมันจะเปิดในเบราว์เซอร์

— Juggernaut

ปัญหาก็เกิดขึ้นซึ่งเป็นว่าไฟล์จะหายไปมันนำทางทั้งหน้าไปยังหน้า 404

— Hugheth

7

คุณสามารถซ่อนลิงค์ดาวน์โหลดและทำการคลิกปุ่ม

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

— Starwarswii
แหล่งที่มา

เพื่อให้สามารถทำงานใน Firefox ทรัพยากรจะต้องอยู่ในโดเมนเดียวกับเอกสาร การตั้งค่าส่วนหัว CORS ไม่ได้ช่วย

— แอนโทนี

2

ไม่เคยทำเช่นนี้

— Wannes

@ ไม่ทราบว่าทำไม

— Starwarswii

4

หากคุณกำลังมองหาวิธีการแก้ปัญหาวานิลลา JavaScript (ไม่มี jQuery) และไม่ใช้แอตทริบิวต์ HTML5 คุณสามารถลอง

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

ขยายตัวอย่างข้อมูล

— เดวิดวิลเฮท
แหล่งที่มา

1

นี่คือสิ่งที่ใช้งานได้ในที่สุดสำหรับฉันเนื่องจากไฟล์ที่จะดาวน์โหลดถูกกำหนดเมื่อโหลดหน้าเว็บ

JS เพื่ออัปเดตแอตทริบิวต์การกระทำของแบบฟอร์ม:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

การเรียก JS เพื่ออัปเดตแอตทริบิวต์การกระทำของฟอร์ม:

<body onLoad="setFormAction();">

แท็กฟอร์มพร้อมปุ่มส่ง:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

ต่อไปนี้ใช้งานไม่ได้ :

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

— slayernoah
แหล่งที่มา

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

— Andrei Epure

1

หากคุณไม่สามารถใช้แบบฟอร์มได้อีกวิธีหนึ่งกับdownloadjsก็ดี Downloadjs ใช้ blob และ html 5 ไฟล์ API ภายใต้ประทุน:

{downloadjs (url, ชื่อไฟล์)}) />

* เป็นไวยากรณ์ jsx / react แต่สามารถใช้ใน html บริสุทธิ์ได้

— Gleb Dolzikov
แหล่งที่มา

เพื่อหลีกเลี่ยงปัญหา CORS สำหรับภาพในโดเมนอื่น ๆ ให้ใส่ crossorigin = "anonymous" ลงในแท็ก img เช่นนี้: <img src = "image.png" crossorigin = "anonymous" />

— Jonathan Harris

0

ที่ใดก็ได้ระหว่าง<body>และ</body>แท็กของคุณใส่ปุ่มโดยใช้รหัสด้านล่าง:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

นี่มันใช้งานได้จริง!

— โรนัลโด้
แหล่งที่มา

1

สำหรับ Chrome มันเป็นคำตอบที่ยอดเยี่ยม

— Hayk Aramyan

1

ไม่ทำงานใน Safari อย่างใดอย่างหนึ่ง: โรงเรียน W3

— อเล็กซ์

2

การไม่ทำงานในเบราว์เซอร์ MS เป็นปัญหาใหญ่และ Chrome ไม่ได้เป็นคำตอบเสมอไป

— SudoKid

คุณไม่สามารถใส่ลิงค์ในปุ่มใน HTML

— Quentin

0

อีกวิธีในการทำในกรณีที่คุณมี URL ที่ซับซ้อนเช่นfile.doc?foo=bar&jon=doeการเพิ่มเขตข้อมูลที่ซ่อนอยู่ภายในแบบฟอร์ม

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

แรงบันดาลใจจาก @Cfreak คำตอบที่ไม่สมบูรณ์

— Bellash
แหล่งที่มา

0

คุณสามารถเพิ่มแท็กโดยไม่มีข้อความใด ๆ แต่มีลิงก์ และเมื่อคุณคลิกปุ่มเหมือนที่คุณมีในรหัสเพียงแค่เรียกใช้ $ ("yourlinkclass") ฟังก์ชั่นคลิก ()

— ThisisFish
แหล่งที่มา

-1

คุณลักษณะการดาวน์โหลดทำ

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

— Rohallah Hatami
แหล่งที่มา

2

ฉันชอบคำตอบของคุณ

— George C.

2

คำถามคือถามอย่างชัดเจนว่าจะทำอย่างไรกับปุ่มแทนลิงค์

— เควนติน

-6

หากคุณใช้<a>แท็กอย่าลืมใช้ URL ทั้งหมดที่นำไปสู่ไฟล์ - เช่น:

<a href="http://www.example.com/folder1/file.doc">Download</a>

— เครื่องหมาย
แหล่งที่มา

ฉันไม่คิดว่าเป็นปัญหาที่นี่ นอกจากนี้ยังไม่จำเป็นต้องใช้พา ธ "สัมบูรณ์" หากลิงก์อยู่ในเส้นทางเดียวกันกับไฟล์

— Rocket Hazmat

@Rocket - แน่นอนว่าคุณถูกต้องเกี่ยวกับเส้นทางสัมบูรณ์อย่างไรก็ตามมันเป็นวิธีที่ดีที่สุดที่จะทำให้แน่ใจว่าถูกต้อง ฉันจะปล่อยให้ OP ตัดสินใจว่ามันมีประโยชน์หรือไม่

— Mark

คำถามคือถามอย่างชัดเจนว่าจะทำอย่างไรกับปุ่มแทนลิงค์

— เควนติน

แอตทริบิวต์การดาวน์โหลดขาดหายไปในโซลูชันนี้ แม้ว่าหลังจากเพิ่มแอตทริบิวต์การดาวน์โหลดแล้วมันจะไม่ทำงานสำหรับข้ามโดเมน

— s sharif

-6

สำหรับฉันแล้วปุ่ม ading แทน anchor text นั้นใช้งานได้ดีจริงๆ

<a href="file.doc"><button>Download!</button></a>

อาจไม่เป็นไปตามกฎส่วนใหญ่ แต่ก็ดูดีทีเดียว

— Brana
แหล่งที่มา

5

ใช้งานได้เนื่องจากเบราว์เซอร์ของคุณไม่รองรับไฟล์. doc

— ออกแบบโดย Adrian

HTML ของคุณไม่ถูกต้อง <a>องค์ประกอบอาจไม่มี<button>องค์ประกอบ

— เควนติน

มันเป็นอย่างนั้นเสมอไหม? คำตอบนี้มีอายุสองปีเมื่อคุณแสดงความคิดเห็นว่า

— John Lord