(HTML) ดาวน์โหลดไฟล์ PDF แทนที่จะเปิดในเบราว์เซอร์เมื่อคลิก

ฉันสงสัยว่าจะดาวน์โหลดลิงก์ไฟล์ PDF ได้อย่างไรแทนที่จะเปิดในเบราว์เซอร์ สิ่งนี้ทำได้อย่างไรใน html (ฉันคิดว่ามันทำผ่านจาวาสคริปต์หรืออะไรสักอย่าง)

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

ฉันไม่แนะนำให้ทำเช่นนี้ วิธีที่ผู้ใช้โต้ตอบกับ PDF ควรปล่อยไว้ให้ผู้ใช้

อัพเดท (2014):

ดังนั้น ... คำตอบนี้ยังคงได้รับการโหวตต่ำมากมาย ฉันคิดว่าส่วนหนึ่งคือคำตอบนี้เมื่อ 4 ปีก่อนและดังที่ Sarim ชี้ให้เห็นตอนนี้มีแอตทริบิวต์HTML 5downloadที่สามารถจัดการสิ่งนี้ได้

ฉันเห็นด้วยและคิดว่าคำตอบของ Sarim นั้นดี (อาจเป็นคำตอบที่เลือกหาก OP กลับมา) อย่างไรก็ตามคำตอบนี้ยังคงเป็นวิธีที่เชื่อถือได้ในการจัดการ (ดังที่คำตอบของYiğit Yener ชี้ให้เห็นและ - แปลก - ผู้คนเห็นด้วย) แม้ว่าแอตทริบิวต์การดาวน์โหลดจะได้รับการสนับสนุน แต่ก็ยังไม่แน่นอน:

http://caniuse.com/#feat=download

ด้วย html5 ตอนนี้เป็นไปได้แล้ว ตั้งค่า Attr "ดาวน์โหลด" ในองค์ประกอบ

<a href="http://link/to/file" download="FileName">Download it!</a>

ที่มา: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

สิ่งนี้ทำได้เฉพาะกับการตั้งค่าส่วนหัวการตอบกลับ http โดยรหัสฝั่งเซิร์ฟเวอร์ ได้แก่ ;

Content-Disposition: attachment; filename=fname.ext

คุณจะต้องใช้สคริปต์ PHP (หรือภาษาฝั่งเซิร์ฟเวอร์อื่นสำหรับสิ่งนี้)

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>

และใช้ HTTacces เพื่อเปลี่ยนเส้นทาง (เขียนใหม่) ไปยังไฟล์ PHP แทน pdf

คุณสามารถใช้ได้

Response.AddHeader("Content-disposition", "attachment; filename=" + Name);

ดูตัวอย่างนี้:

http://www.codeproject.com/KB/aspnet/textfile.aspx

สิ่งนี้ใช้สำหรับ ASP.NET ฉันแน่ใจว่าคุณสามารถค้นหาโซลูชันที่คล้ายกันในภาษาฝั่งเซิร์ฟเวอร์อื่น ๆ ทั้งหมด อย่างไรก็ตามไม่มีวิธีแก้ปัญหาจาวาสคริปต์ที่ดีที่สุดเท่าที่ฉันรู้

หากไม่มีแอตทริบิวต์ html5 ก็สามารถทำได้โดยใช้ php:

สร้างไฟล์ php ชื่อdownload.phpด้วยรหัสนี้:

<?php
ob_start();
$file = "yourPDF.pdf"

if (file_exists($file)) 
{
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit();
}

ตอนนี้หากคุณต้องการเริ่มดาวน์โหลด pdf โดยอัตโนมัติให้เขียน javascript นี้:

<script>window.location = "download.php";</script>

หากคุณต้องการให้สิ่งนี้ทำงานบนลิงก์ให้ใช้สิ่งนี้ ...

<a href='javascript:window.location = "download.php"'>
    Download it!
</a>

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

    var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    var event = document.createEvent('Event');
    event.initEvent('click', true, true); 
    save.dispatchEvent(event);
   (window.URL || window.webkitURL).revokeObjectURL(save.href);

สำหรับการอัปเดต Chrome ใหม่บางครั้งเหตุการณ์ไม่ทำงาน สำหรับรหัสต่อไปนี้จะถูกใช้

  var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    document.body.appendChild(save);
    save.click();
    document.body.removeChild(save);

การต่อท้ายเด็กและการนำเด็กออกมีประโยชน์สำหรับเบราว์เซอร์ Firefox, Internet explorer เท่านั้น บน Chrome จะทำงานได้โดยไม่ต้องต่อท้ายและนำเด็กออก

วิธีแก้ปัญหาที่ได้ผลดีที่สุดสำหรับฉันคือสิ่งที่Nickเขียนขึ้นในบล็อกของเขา

แนวคิดพื้นฐานในการแก้ปัญหาของเขาคือการใช้ตัวดัดแปลงส่วนหัวของเซิร์ฟเวอร์ Apache และแก้ไข. htaccess เพื่อรวมคำสั่ง FileMatch ที่บังคับให้ไฟล์ * .pdf ทั้งหมดทำหน้าที่เป็นสตรีมแทนที่จะเป็นไฟล์แนบ แม้ว่าสิ่งนี้จะไม่เกี่ยวข้องกับการแก้ไข HTML (ตามคำถามเดิม) แต่ก็ไม่จำเป็นต้องมีการเขียนโปรแกรมใด ๆ

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

ฉันต้องการเพิ่มว่ามีตัวเลือก PDF ในการโพสต์ / ส่งแบบฟอร์มที่กรอกได้ผ่าน API ไปยังเซิร์ฟเวอร์ของคุณ แต่ต้องใช้เวลาสักครู่ในการใช้งาน

เหตุผลที่สองเป็นเพราะเวลาเป็นสิ่งที่ต้องคำนึงถึง การเขียนตัวจัดการไฟล์ PHP เพื่อบังคับให้มีการจัดการเนื้อหาในส่วนหัว () จะใช้เวลาน้อยกว่า API แต่ก็ยังนานกว่าวิธีการของ Nick

ถ้าคุณรู้วิธีเปิด Apache mod และแก้ไข. htaccss คุณจะทำได้ในเวลาประมาณ 10 นาที ต้องใช้โฮสติ้ง Linux (ไม่ใช่ Windows) นี่อาจไม่ใช่แนวทางที่เหมาะสมสำหรับการใช้งานทั้งหมดเนื่องจากต้องมีการเข้าถึงเซิร์ฟเวอร์ระดับสูงเพื่อกำหนดค่า ดังนั้นหากคุณบอกว่าการเข้าถึงอาจเป็นเพราะคุณรู้วิธีทำสองสิ่งนั้นแล้ว ถ้าไม่มีให้ตรวจสอบบล็อกของ Nick สำหรับคำแนะนำเพิ่มเติม

เนื่องจากวิธี html5 (คำตอบก่อนหน้าของฉัน) ไม่สามารถใช้ได้ในทุกเบราว์เซอร์จึงมีวิธีแฮ็คเล็กน้อย

โซลูชันนี้ต้องการให้คุณใช้งานไฟล์ที่ต้องการจากโดเมนเดียวกันหรือได้รับอนุญาตจาก CORS

1. ก่อนอื่นให้ดาวน์โหลดเนื้อหาของไฟล์ผ่าน XMLHttpRequest (Ajax)
2. จากนั้นให้ข้อมูล URI โดย base64 application/octet-streamเข้ารหัสเนื้อหาของไฟล์และการตั้งค่าสื่อชนิด ผลลัพธ์ควรมีลักษณะดังนี้

data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

location.href = dataตั้งตอนนี้ ซึ่งจะทำให้เบราว์เซอร์ดาวน์โหลดไฟล์ ขออภัยคุณไม่สามารถตั้งชื่อไฟล์หรือนามสกุลด้วยวิธีนี้ การเล่นซอกับสื่ออาจให้ผลบางอย่าง

ดูรายละเอียด: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

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

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

• ใน IIS ไปที่โฟลเดอร์นั้นแล้วดับเบิลคลิก HTTP Response Headers

• เพิ่มส่วนหัวใหม่ด้วยข้อมูลต่อไปนี้:

  Name: content-disposition Value: attachment

(จาก: http://forums.iis.net/t/1175103.aspx?add+CustomHeaders+only+for+certain+file+types+ )

หากคุณกำลังใช้ HTML5 (และผมคิดว่าตอนนี้ใช้วันที่ทุกคน) downloadมีคุณลักษณะที่เรียกว่า

เช่น <a href="somepathto.pdf" download="filename">

นี่filenameเป็นทางเลือก แต่ถ้ามีให้จะใช้ชื่อนี้สำหรับไฟล์ที่ดาวน์โหลด

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

คุณสามารถใช้ download.js ( https://github.com/rndme/downloadและhttp://danml.com/download.html ) หากไฟล์อยู่ใน URL ภายนอกคุณต้องทำการร้องขอ Ajax แต่ถ้าไม่ใช่คุณสามารถใช้ฟังก์ชัน:

download(Path, name, mime)

อ่านเอกสารประกอบสำหรับรายละเอียดเพิ่มเติมใน GitHub