(HTML) Tải xuống tệp PDF thay vì mở chúng trong trình duyệt khi được nhấp

Tôi tự hỏi làm thế nào để tạo một liên kết tệp PDF có thể tải xuống thay vì mở chúng trong trình duyệt? Làm thế nào điều này được thực hiện trong html? (Tôi cho rằng nó được thực hiện thông qua javascript hoặc thứ gì đó).

Bạn không thể làm điều này với HTML. Đó là một giải pháp dựa trên máy chủ. Bạn phải truyền tệp để trình duyệt kích hoạt hộp thoại lưu.

Tôi khuyên bạn không nên làm điều này. Cách người dùng tương tác với PDF sẽ do người dùng quyết định.

CẬP NHẬT (2014):

Vì vậy, ... câu trả lời này vẫn nhận được nhiều phản đối. Tôi giả sử một phần của điều đó là điều này đã được trả lời 4 năm trước và như Sarim đã chỉ ra, bây giờ có thuộc tính HTML 5download có thể xử lý điều này.

Tôi đồng ý, và nghĩ câu trả lời của Sarim là tốt (có lẽ nó sẽ là câu trả lời được chọn nếu OP quay trở lại). Tuy nhiên, câu trả lời này vẫn là cách đáng tin cậy để xử lý nó (như câu trả lời của Yiğit Yener đã chỉ ra và - kỳ lạ thay - mọi người đồng ý). Mặc dù thuộc tính tải xuống đã được hỗ trợ, nhưng nó vẫn còn nguyên vẹn:

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

Với html5, bây giờ có thể. Đặt một phần tử "tải xuống".

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

Nguồn: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

Điều này chỉ có thể thực hiện được khi đặt tiêu đề phản hồi http bằng mã phía máy chủ. Cụ thể là;

Content-Disposition: attachment; filename=fname.ext

Bạn cần thay đổi các tiêu đề http đã gửi. Tùy thuộc vào máy chủ của bạn, bạn có thể sửa đổi .htaccess của mình như sau:

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

bạn sẽ cần sử dụng tập lệnh PHP (hoặc một ngôn ngữ phía máy chủ khác cho việc này)

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

và sử dụng httacces để chuyển hướng (viết lại) đến tệp PHP thay vì pdf

Bạn có thể dùng

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

Kiểm tra ví dụ này:

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

Điều này áp dụng cho ASP.NET. Tôi chắc chắn rằng bạn có thể tìm thấy các giải pháp tương tự trong tất cả các ngôn ngữ phía máy chủ khác. Tuy nhiên, không có giải pháp javascript nào theo hiểu biết tốt nhất của tôi.

Nếu không có thuộc tính html5, người ta có thể đạt được điều này bằng cách sử dụng php:

Tạo tệp php có tên download.php với mã này:

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

Bây giờ nếu bạn muốn tự động bắt đầu tải xuống pdf, hãy viết javascript này:

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

Nếu bạn muốn cái này hoạt động trên một liên kết, hãy sử dụng cái này ...

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

Khi bạn muốn tải trực tiếp bất kỳ hình ảnh hoặc tệp pdf nào từ trình duyệt thay vì mở nó trong tab mới thì trong javascript, bạn nên đặt giá trị cho thuộc tính tải xuống của tạo liên kết động

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

Đối với bản cập nhật Chrome mới, một số sự kiện thời gian không hoạt động. cho rằng mã sau sẽ được sử dụng

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

Thêm con và loại bỏ con chỉ hữu ích cho Firefox, trình duyệt Internet Explorer. Trên chrome, nó sẽ hoạt động mà không cần thêm và xóa con

Giải pháp phù hợp nhất với tôi là giải pháp được Nick viết trên blog của anh ấy

Ý tưởng cơ bản về giải pháp của anh ấy là sử dụng mod tiêu đề máy chủ Apache và chỉnh sửa .htaccess để bao gồm chỉ thị FileMatch buộc tất cả các tệp * .pdf hoạt động dưới dạng một luồng thay vì tệp đính kèm. Mặc dù điều này không thực sự liên quan đến việc chỉnh sửa HTML (như câu hỏi ban đầu) nhưng nó không yêu cầu bất kỳ lập trình nào.

Lý do đầu tiên tôi thích cách tiếp cận của Nick là vì nó cho phép tôi đặt nó trên cơ sở từng thư mục để tệp PDF trong một thư mục vẫn có thể được mở trong trình duyệt trong khi cho phép những người khác (những cái chúng tôi muốn người dùng chỉnh sửa rồi tải lên lại) buộc phải tải xuống.

Tôi cũng muốn nói thêm rằng có một tùy chọn với PDF để đăng / gửi các biểu mẫu có thể điền thông qua API đến máy chủ của bạn, nhưng điều đó sẽ mất một thời gian để triển khai.

Lý do thứ hai là vì thời gian là một yếu tố cần cân nhắc. Viết trình xử lý tệp PHP để buộc bố trí nội dung trong header () cũng sẽ mất ít thời gian hơn so với API, nhưng vẫn lâu hơn so với cách tiếp cận của Nick.

Nếu bạn biết cách bật một mod Apache và chỉnh sửa .htaccss, bạn có thể nhận được điều này trong khoảng 10 phút. Nó yêu cầu lưu trữ Linux (không phải Windows). Đây có thể không phải là cách tiếp cận phù hợp cho tất cả các mục đích sử dụng vì nó yêu cầu quyền truy cập máy chủ cấp cao để định cấu hình. Như vậy, nếu bạn đã nói quyền truy cập thì có lẽ vì bạn đã biết cách thực hiện hai điều đó. Nếu không, hãy kiểm tra blog của Nick để biết thêm hướng dẫn.

Vì cách html5 (câu trả lời trước đây của tôi) không khả dụng trên tất cả các trình duyệt, có một cách hơi hack khác.

Giải pháp này yêu cầu bạn đang cung cấp tệp dự định từ cùng một miền HOẶC có quyền CORS.

1. Trước tiên, tải xuống nội dung của tệp qua XMLHttpRequest (Ajax).
2. Sau đó, tạo một URI dữ liệu bằng cách mã hóa base64 nội dung của tệp và đặt loại phương tiện thành application/octet-stream. Kết quả sẽ như thế nào

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

Bây giờ thiết lập location.href = data. Điều này sẽ khiến trình duyệt tải xuống tệp. Rất tiếc, bạn không thể đặt tên hoặc phần mở rộng tệp theo cách này. Loay hoay với loại phương tiện có thể mang lại điều gì đó.

Xem chi tiết: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Tôi cần thực hiện việc này cho các tệp được tạo bằng tên động trong một thư mục cụ thể và được IIS cung cấp.

Điều này đã làm việc cho tôi:

• Trong IIS, truy cập thư mục đó và nhấp đúp vào Tiêu đề phản hồi HTTP.

• Thêm tiêu đề mới với thông tin sau:

  Name: content-disposition Value: attachment

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

Nếu bạn đang sử dụng HTML5 (và tôi đoán bây giờ mọi người đều sử dụng nó), có một thuộc tính được gọi là download.

Ví dụ. <a href="somepathto.pdf" download="filename">

đây filenamelà tùy chọn, nhưng nếu được cung cấp, nó sẽ lấy tên này cho tệp đã tải xuống.

Hành vi sẽ phụ thuộc vào cách trình duyệt được thiết lập để xử lý các loại MIME khác nhau. Trong trường hợp này, kiểu MIME là application / pdf. Nếu bạn muốn buộc trình duyệt tải xuống tệp, bạn có thể thử buộc một loại MIME khác trên tệp PDF. Tôi khuyên bạn không nên làm điều này vì người dùng sẽ lựa chọn điều gì sẽ xảy ra khi họ mở tệp PDF.

Bạn có thể sử dụng download.js ( https://github.com/rndme/download và http://danml.com/download.html ). Nếu tệp nằm trong URL bên ngoài, bạn phải thực hiện một yêu cầu Ajax, nhưng nếu không, thì bạn có thể sử dụng hàm:

download(Path, name, mime)

Đọc tài liệu của họ để biết thêm chi tiết trong GitHub.

Cuối cùng tôi đã tìm thấy ...... tạo thẻ neo động và nhấp vào nó

<script> 
   $('#myclick').click(function(){
       $('body').append('<a id="link" href="mypdf.pdf" 
        download="Payment.pdf">&nbsp;</a>');
       $('#link')[0].click();
   });
</script>

'Payment.pdf' chỉ dành cho tên tùy chỉnh.