(HTML) 클릭시 브라우저에서 열지 않고 PDF 파일을 다운로드합니다.

PDF 파일 링크를 브라우저에서 여는 대신 다운로드 가능하게 만드는 방법이 궁금합니다. 이것은 HTML에서 어떻게 이루어 집니까? (나는 그것이 자바 스크립트 또는 무언가를 통해 수행되었다고 가정합니다).

HTML로는 할 수 없습니다. 서버 기반 솔루션입니다. 브라우저가 저장 대화 상자를 트리거하도록 파일을 스트리밍해야합니다.

나는 이것을하지 않는 것이 좋습니다. 사용자가 PDF와 상호 작용하는 방법은 사용자에게 맡겨야합니다.

업데이트 (2014) :

그래서 ...이 답변은 여전히 ​​많은 반대표를 얻습니다. 그 중 일부는 이것이 4 년 전에 답변되었다고 가정하고 Sarim이 지적했듯이 이제이를 처리 할 수 있는 HTML 5 download속성 이 있습니다.

나는 동의하고 Sarim의 대답이 좋다고 생각합니다 (OP가 반환되면 아마도 선택한 대답이어야 함). 그러나이 답변은 여전히 ​​신뢰할 수있는 방법입니다 (Yiğit Yener의 답변이 지적하고 이상하게도 사람들이 동의 함). 다운로드 속성이 지원을 받았지만 여전히 불안정합니다.

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

html5로 이제 가능합니다. 요소에 "다운로드"속성을 설정합니다.

<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

전송 된 http 헤더를 변경해야합니다. 서버에 따라 다음과 같이 .htaccess를 수정할 수 있습니다.

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

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를 사용하여 pdf 대신 PHP 파일로 리디렉션 (재 작성)합니다.

당신이 사용할 수있는

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

이 예를 확인하십시오.

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

이것은 ASP.NET에 적용됩니다. 다른 모든 서버 측 언어에서 유사한 솔루션을 찾을 수 있다고 확신합니다. 그러나 내가 아는 한 자바 스크립트 솔루션이 없습니다.

html5 속성이 없으면 php를 사용하여이를 달성 할 수 있습니다.

이 코드로 download.php 라는 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 다운로드를 시작하려면이 자바 스크립트를 작성하십시오.

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

이것이 링크에서 작동하도록하려면 이것을 사용하십시오 ...

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

새 탭에서 열 때 대신 브라우저에서 이미지 또는 pdf 파일을 직접 다운로드하려면 javascript에서 동적 링크 생성의 다운로드 속성 값을 설정해야합니다.

    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 브라우저에서만 유용합니다. 크롬에서는 자식을 추가하거나 제거하지 않고 작동합니다.

나에게 가장 잘 맞는 솔루션은 Nick이 블로그에 작성한 솔루션이었습니다.

그의 솔루션의 기본 아이디어는 Apache 서버 헤더 모드를 사용하고 모든 * .pdf 파일이 첨부 파일 대신 스트림으로 작동하도록하는 FileMatch 지시문을 포함하도록 .htaccess를 편집하는 것입니다. 이것은 실제로 HTML 편집을 포함하지는 않지만 (원래 질문에 따라) 프로그래밍 자체가 필요하지 않습니다.

내가 Nick의 접근 방식을 선호하는 첫 번째 이유는 폴더 단위로 설정할 수 있었기 때문에 한 폴더의 PDF를 다른 폴더 (사용자가 편집 한 다음 다시 업로드하기를 원하는 파일)를 허용하면서 브라우저에서 계속 열 수 있었기 때문입니다. 다운로드로 강제됩니다.

또한 API를 통해 작성 가능한 양식을 서버에 게시 / 제출하는 PDF 옵션이 있지만 구현하는 데 시간이 걸립니다.

두 번째 이유는 시간이 배려이기 때문입니다. header ()에서 콘텐츠 배치를 강제하는 PHP 파일 핸들러를 작성하는 것도 API보다 시간이 덜 걸리지 만 Nick의 접근 방식보다 오래 걸립니다.

Apache 모드를 켜고 .htaccss를 편집하는 방법을 알고 있다면 약 10 분 안에 얻을 수 있습니다. Linux 호스팅 (Windows 아님)이 필요합니다. 구성하려면 높은 수준의 서버 액세스가 필요하므로 모든 용도에 적합한 방법은 아닙니다. 따라서 액세스 권한을 언급했다면 이미이 두 가지 작업을 수행하는 방법을 알고 있기 때문일 것입니다. 그렇지 않은 경우 Nick의 블로그에서 자세한 지침을 확인하십시오.

html5 방식 (내 이전 답변)은 모든 브라우저에서 사용할 수 없으므로 약간의 해킹 방법이 있습니다.

이 솔루션을 사용하려면 동일한 도메인에서 의도 한 파일을 제공하거나 CORS 권한이 있어야합니다.

1. 먼저 XMLHttpRequest (Ajax)를 통해 파일 내용을 다운로드합니다.
2. 그런 다음 파일의 내용을 base64로 인코딩하여 데이터 URI를 만들고 media-type을 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 응답 헤더를 두 번 클릭합니다.

• 다음 정보로 새 헤더를 추가하십시오.

  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입니다. 브라우저가 파일을 다운로드하도록 강제하려는 경우 PDF 파일에 다른 MIME 유형을 적용 할 수 있습니다. 사용자가 PDF 파일을 열 때 어떤 일이 일어날 지 선택해야하므로 반대하는 것이 좋습니다.

download.js ( https://github.com/rndme/download 및 http://danml.com/download.html )를 사용할 수 있습니다 . 파일이 외부 URL에있는 경우 Ajax 요청을해야하지만 그렇지 않은 경우 다음 함수를 사용할 수 있습니다.

download(Path, name, mime)

GitHub에서 자세한 내용은 해당 설명서를 참조하십시오.

드디어 찾았습니다 ...... 동적 앵커 태그를 만들고 클릭합니다.

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

'Payment.pdf'는 맞춤 이름 전용입니다.