Làm cách nào để tạo liên kết tải xuống trong HTML?

Tôi có một ý tưởng cơ bản về HTML. Tôi muốn tạo liên kết tải xuống trong trang web mẫu của mình, nhưng tôi không biết làm thế nào để tạo liên kết. Làm cách nào để tạo liên kết để tải xuống tệp chứ không phải truy cập vào tệp?

Câu trả lời này đã lỗi thời. Bây giờ chúng ta có downloadthuộc tính . (xem thêm liên kết này đến MDN )

Nếu theo "liên kết tải xuống", bạn có nghĩa là một liên kết đến một tệp để tải xuống, hãy sử dụng

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

những target=_blanksẽ làm cho một cửa sổ trình duyệt mới xuất hiện trước khi bắt đầu tải về. Cửa sổ đó thường sẽ bị đóng khi trình duyệt phát hiện ra rằng tài nguyên là tệp tải xuống.

Lưu ý rằng các loại tệp được trình duyệt biết đến (ví dụ hình ảnh JPG hoặc GIF) thường sẽ được mở trong trình duyệt.

Bạn có thể thử gửi các tiêu đề phù hợp để buộc tải xuống như được phác thảo, ví dụ ở đây . (kịch bản phía máy chủ hoặc truy cập vào cài đặt máy chủ là bắt buộc cho điều đó.)

Trong các trình duyệt hiện đại hỗ trợ HTML5, có thể có các cách sau:

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

Bạn cũng có thể sử dụng điều này:

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

Điều này sẽ cho phép bạn thay đổi tên của tệp thực sự đang được tải xuống.

Ngoài ra (hoặc thay thế) cho <a downloadthuộc tính của HTML5 đã được đề cập, hành vi tải xuống
trình duyệt đĩa của trình duyệt cũng có thể được kích hoạt bởi tiêu đề phản hồi http sau:

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

Đây là cách làm trước HTML5 (và vẫn hoạt động với các trình duyệt hỗ trợ HTML5).

Liên kết tải xuống sẽ là liên kết đến tài nguyên bạn muốn tải xuống. Nó được xây dựng theo cách tương tự như bất kỳ liên kết nào khác:

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

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

Để liên kết đến tệp, làm tương tự như bất kỳ liên kết trang nào khác:

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

Để buộc mọi thứ phải tải xuống ngay cả khi chúng có plugin nhúng (Windows + QuickTime = ugh), bạn có thể sử dụng tiện ích này trong htaccess / apache2.conf:

AddType application/octet-stream EXTENSION

Chủ đề này có lẽ là cổ xưa, nhưng nó hoạt động trong html5 cho tệp cục bộ của tôi.

Đối với pdf:

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

Điều này sẽ mở pdf trong một cửa sổ mới và cho phép bạn tải xuống (ít nhất là trong firefox). Đối với bất kỳ tệp nào khác, chỉ cần đặt tên tệp. Đối với hình ảnh và âm nhạc, bạn muốn lưu trữ chúng trong cùng thư mục với trang web của bạn. Vì vậy, nó sẽ giống như

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

Thuộc tính tải xuống không hoạt động trong IE, nó hoàn toàn bỏ qua "tải xuống". Tải xuống không hoạt động trên Firefox nếu href trỏ đến một trang web từ xa. Vì vậy, ví dụ của Odin không hoạt động trên Firefox 41.0.2.

Có thêm một sự tinh tế có thể giúp đỡ ở đây.

Tôi muốn có các liên kết cho phép cả trình duyệt và hiển thị trên trình duyệt cũng như một liên kết để tải xuống hoàn toàn. Thuộc tính tải xuống mới vẫn ổn, nhưng không hoạt động mọi lúc vì trình duyệt bắt buộc phải phát hoặc hiển thị tệp vẫn rất mạnh.

NHƯNG .. điều này dựa trên việc kiểm tra tiện ích mở rộng trên tên tệp của URL! Bạn không muốn sử dụng ánh xạ tiện ích mở rộng của máy chủ vì bạn muốn phân phối cùng một tệp theo hai cách khác nhau. Vì vậy, để tải xuống, bạn có thể đánh lừa nó bằng cách liên kết tệp mềm với một tên không rõ ràng với ánh xạ mở rộng này, chỉ vào nó, sau đó sử dụng tính năng đổi tên của tải xuống để sửa tên.

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

Tôi đã hy vọng chỉ cần ném một truy vấn giả vào cuối hoặc bằng cách nào đó làm mờ phần mở rộng sẽ hoạt động, nhưng thật đáng buồn, nó không.

Thuộc tính tải xuống là mới cho <a>thẻ trong HTML5

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
hoặc là
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

Tôi thích cái đầu tiên hơn là bất kỳ phần mở rộng nào.

Bạn có thể tải xuống theo nhiều cách khác nhau mà bạn có thể làm theo cách của tôi. Mặc dù các tệp có thể không tải xuống do không cho phép 'cho phép cửa sổ bật lên' nhưng trong môi trường của bạn, điều này sẽ hoạt động hoàn hảo

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

một cái khác cái này cũng sẽ thất bại do 'Tùy chọn khung X' thành '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>

Như thế này

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

Vì vậy, một tập tin name.jpg trên một trang web example.com sẽ trông như thế này

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

tôi biết tôi đến muộn nhưng đây là những gì tôi nhận được sau 1 giờ tìm kiếm

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

    ?>

và để liên kết tải về, tôi đã làm điều này

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