ฉันจะสร้างลิงค์ดาวน์โหลดใน HTML ได้อย่างไร

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

คำตอบนี้ล้าสมัยแล้ว ตอนนี้เรามีแอตทริบิวต์download (ดูลิงค์นี้ไปยัง MDN )

ถ้าโดย "ลิงค์ดาวน์โหลด" คุณหมายถึงลิงค์ไปยังไฟล์ที่จะดาวน์โหลดให้ใช้

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

target=_blankจะทำให้หน้าต่างใหม่ปรากฏก่อนที่จะเริ่มดาวน์โหลด โดยปกติแล้วหน้าต่างนั้นจะถูกปิดเมื่อเบราว์เซอร์ค้นพบว่าทรัพยากรเป็นการดาวน์โหลดไฟล์

โปรดทราบว่าประเภทไฟล์ที่รู้จักกับเบราว์เซอร์ (เช่นรูปภาพ JPG หรือ GIF) จะเปิดขึ้นภายในเบราว์เซอร์

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

ในเบราว์เซอร์สมัยใหม่ที่รองรับ HTML5 ต่อไปนี้เป็นไปได้:

<a href="link/to/your/download/file" download>Download link</a>

คุณยังสามารถใช้สิ่งนี้:

<a href="link/to/your/download/file" download="filename">Download link</a>

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

นอกจากนี้ (หรือแทนที่) ไปยัง<a downloadแอตทริบิวต์ของ HTML5 ที่กล่าวถึงแล้ว
การดาวน์โหลดเบราว์เซอร์ไปยังลักษณะการทำงานของดิสก์สามารถถูกเรียกใช้โดยส่วนหัวการตอบสนอง http ต่อไปนี้:

Content-Disposition: attachment; filename=ProposedFileName.txt;

นี่เป็นวิธีที่ต้องทำก่อน HTML5 (และยังคงใช้ได้กับเบราว์เซอร์ที่รองรับ HTML5)

ลิงค์ดาวน์โหลดจะเป็นลิงค์ไปยังแหล่งข้อมูลที่คุณต้องการดาวน์โหลด มันถูกสร้างในลักษณะเดียวกับที่ลิงก์อื่น ๆ จะเป็น:

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

หากต้องการลิงก์ไปยังไฟล์ให้ทำเช่นเดียวกับลิงค์ของเพจอื่น:

<a href="...">link text</a>

หากต้องการบังคับให้สิ่งต่าง ๆ ดาวน์โหลดแม้ว่าจะมีปลั๊กอินที่ฝังอยู่ (Windows + QuickTime = ugh) คุณสามารถใช้สิ่งนี้ใน htaccess / apache2.conf ของคุณ:

AddType application/octet-stream EXTENSION

ตอนนี้เธรดนี้อาจเก่าแก่ แต่ตอนนี้ใช้ได้เป็น html5 สำหรับไฟล์ในเครื่อง

สำหรับ pdf:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

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

<p><a href="images/logo2.png" download>test pdf</a></p>

แอตทริบิวต์การดาวน์โหลดไม่ทำงานใน IE มันจะละเว้น "การดาวน์โหลด" อย่างสมบูรณ์ การดาวน์โหลดไม่ทำงานบน Firefox หาก href ชี้ไปที่ไซต์ระยะไกล ดังนั้นตัวอย่างของ Odin จึงไม่ทำงานบน Firefox 41.0.2

มีความละเอียดอ่อนอีกหนึ่งที่สามารถช่วยได้ที่นี่

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

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

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

ฉันหวังว่าเพียงแค่โยนแบบสอบถามแบบหลอก ๆ ในตอนท้ายมิฉะนั้นการทำให้ส่วนขยายที่ยุ่งเหยิงนั้นใช้งานได้ แต่น่าเสียดายที่มันไม่ได้

แอตทริบิวต์การดาวน์โหลดเป็นสิ่งใหม่สำหรับ<a>แท็กใน HTML5

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
หรือ
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

ฉันชอบอันแรกที่มันเป็นที่นิยมมากกว่าในส่วนขยายใด ๆ

คุณสามารถดาวน์โหลดได้หลายวิธี แม้ว่าไฟล์อาจไม่สามารถดาวน์โหลดได้เนื่องจากไม่ได้รับอนุญาตให้ 'อนุญาตป๊อปอัป' แต่ในสภาพแวดล้อมของคุณการดำเนินการนี้จะทำงานได้อย่างสมบูรณ์แบบ

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

อีกอันหนึ่งอันนี้จะล้มเหลวเนื่องจาก 'X-Frame-Options' เป็น 'sameorigin'

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

แบบนี้

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

ดังนั้นไฟล์ name.jpg บนเว็บไซต์ example.com จะมีลักษณะเช่นนี้

<a href="www.example.com/name.jpg">Image</a>

ฉันรู้ว่าฉันมาสาย แต่นี่คือสิ่งที่ฉันได้รับหลังจากการค้นหา 1 ชั่วโมง

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

และสำหรับลิงก์ที่ดาวน์โหลดได้ฉันทำสิ่งนี้

<a href="index.php?file=file.pdf">Download PDF</a>