programing

PDF 파일을 HTML 링크로 다운로드하려면 어떻게 해야 합니까?

sourcetip 2022. 10. 28. 23:05
반응형

PDF 파일을 HTML 링크로 다운로드하려면 어떻게 해야 합니까?

다운로드용 pdf 파일 링크를 제 웹페이지에 아래와 같이 보내드립니다.

<a href="myfile.pdf">Download Brochure</a>

문제는 사용자가 이 링크를 클릭했을 때

  • 사용자가 Adobe Acrobat을 설치한 경우 Adobe Reader와 동일한 브라우저 창에 파일이 열립니다.
  • Adobe Acrobat이 설치되어 있지 않으면 사용자에게 파일을 다운로드하라는 메시지가 표시됩니다.

다만, Adobe acrobat의 인스톨 여부에 관계없이, 유저에게 항상 팝업을 표시해 주세요.

어떻게 하면 좋을까요?

이것은 일반적인 문제이지만 간단한 HTML 5 솔루션이 있다는 것을 아는 사람은 거의 없습니다.

<a href="./directory/yourfile.pdf" download="newfilename">Download the pdf</a>

서 ★★★★★newfilename는 사용자가 파일을 저장하는 데 권장되는 파일 이름입니다.또는 다음과 같이 빈 채로 두면, 서버측의 파일명이 디폴트로 설정됩니다.

<a href="./directory/yourfile.pdf" download>Download the pdf</a>

호환성:Firefox 21과 Iron에서 테스트했는데 둘 다 정상적으로 동작했습니다.HTML5와 호환되지 않거나 오래된 브라우저에서는 작동하지 않을 수 있습니다.테스트한 브라우저 중 강제 다운로드를 하지 않은 것은 IE뿐입니다.

호환성을 확인하려면 http://caniuse.com/ #http=http://http://caniuse.com/ 를 참조해 주세요.

에 링크하는 대신.PDF 파일 대신 다음과 같은 작업을 수행합니다.

<a href="pdf_server.php?file=pdffilename">Download my eBook</a>

커스텀 헤더를 출력하고 PDF(바이너리 세이프)를 열어, 데이터를 유저의 브라우저에 인쇄합니다.그러면, 유저는 브라우저의 설정에 관계없이, PDF 의 보존을 선택할 수 있습니다.pdf_server.php는 다음과 같습니다.

header("Content-Type: application/octet-stream");

$file = $_GET["file"] .".pdf";
header("Content-Disposition: attachment; filename=" . urlencode($file));   
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header("Content-Description: File Transfer");            
header("Content-Length: " . filesize($file));
flush(); // this doesn't really matter.
$fp = fopen($file, "r");
while (!feof($fp))
{
    echo fread($fp, 65536);
    flush(); // this is essential for large downloads
} 
fclose($fp);

PS: "file" 변수에 대한 건전성 체크를 실행하여 파일 확장자 수용 안 함, 슬래시 거부, 값에 .pdf 추가 등 다른 사용자가 파일을 훔치지 않도록 합니다.

모든 파일 행을 반복하지 마십시오.대신 읽기 파일을 사용하면 더 빠릅니다.이것은 php 사이트입니다.http://php.net/manual/en/function.readfile.php

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

누군가가 php 파일을 다운로드 할 수 있으므로 get 변수를 반드시 삭제하십시오.

스크립트를 PHP를 사용하여 를 다시 더 ..htaccess 하면 "nice(. "nice" URL)이 myfile.pdfdownload.php?myfile를 참조해 주세요.

<FilesMatch "\.pdf$">
ForceType applicaton/octet-stream
Header set Content-Disposition attachment
</FilesMatch>

평이한 오래된 HTML과 자바스크립트/jQuery를 사용하여 부드럽게 열화시키는 방법을 찾았습니다.IE7-10, Safari, Chrome 및 FF에서 테스트 완료:

다운로드 링크용 HTML:

<p>Thanks for downloading! If your download doesn't start shortly, 
<a id="downloadLink" href="...yourpdf.pdf" target="_blank" 
type="application/octet-stream" download="yourpdf.pdf">click here</a>.</p>

jQuery(순수한 JavaScript 코드가 더 상세하게 표시됨)는 약간의 지연 후 링크 클릭을 시뮬레이션합니다.

var delay = 3000;
window.setTimeout(function(){$('#downloadLink')[0].click();},delay);

위해 검출을 할 수 검출이는 HTML5 를 사용합니다.window.open()파일을 사용하여 새 창을 엽니다.

열쇠는 다음과 같습니다.

header("Content-Type: application/octet-stream");

PDF 파일 송신중에, 컨텐츠 타입의 애플리케이션/x-pdf 문서 또는 애플리케이션/pdf 가 송신됩니다.일반적으로 Adobe Reader는 PDF MIME 유형을 수신할 때 브라우저가 문서를 Adobe Reader로 전달하도록 이 MIME 유형에 대한 처리기를 설정합니다.

이것은 HTML 를 사용해 실시할 수 있습니다.

<a href="myfile.pdf">Download Brochure</a>

다운로드 특성 추가:파일명은 myfile.pdf 입니다.

<a href="myfile.pdf" download>Download Brochure</a>

다운로드 속성의 값을 지정합니다.

<a href="myfile.pdf" download="Brochure">Download Brochure</a>

파일명은 브로셔.pdf 입니다.

답변이 매우 늦었다는 것을 알지만, 자바스크립트로 이것을 할 수 있는 해킹을 찾았습니다.

function downloadFile(src){
    var link=document.createElement('a');
    document.body.appendChild(link);
    link.href= src;
    link.download = '';
    link.click();
}

이것을 시험해 보세요.

<a href="pdf_server_with_path.php?file=pdffilename&path=http://myurl.com/mypath/">Download my eBook</a>

pdf_server_with_path.php 내의 코드는 다음과 같습니다.

header("Content-Type: application/octet-stream");

$file = $_GET["file"] .".pdf";
$path = $_GET["path"];
$fullfile = $path.$file;

header("Content-Disposition: attachment; filename=" . Urlencode($file));   
header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header("Content-Description: File Transfer");            
header("Content-Length: " . Filesize($fullfile));
flush(); // this doesn't really matter.
$fp = fopen($fullfile, "r");
while (!feof($fp))
{
    echo fread($fp, 65536);
    flush(); // this is essential for large downloads
} 
fclose($fp);

여기 다른 방법이 있습니다.웹 서버 로직을 사용하기 위해 브라우저 지원에 의존하거나 애플리케이션 계층에서 이 문제를 해결하는 것이 좋습니다.

Apache를 사용하고 있으며 관련 디렉토리에 .htaccess 파일을 저장할 수 있는 경우 아래 코드를 사용할 수 있습니다.물론 httpd.conf에도 넣을 수 있습니다.접근할 수 있다면요.

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

FilesMatch 디렉티브는 regex일 뿐이므로 원하는 만큼 세밀하게 설정하거나 다른 확장자를 추가할 수 있습니다.

Header 행은 위의 PHP 스크립트의 첫 번째 행과 동일한 작업을 수행합니다.Content-Type 행도 설정할 필요가 있는 경우는, 같은 방법으로 설정할 수 있습니다만, 필수는 없습니다.

Ruby on Rails 어플리케이션(특히 Prawn gem이나 Prawnto Rails 플러그인 등)에서는 풀 온 스크립트(이전 PHP 예)보다 조금 더 간단하게 실행할 수 있습니다.

컨트롤러 내:

def index

 respond_to do |format|
   format.html # Your HTML view
   format.pdf { render :layout => false }
 end
end

render : download = > false part는 PDF 렌더링 대신 "Would you want to download this file?" 프롬프트를 열도록 브라우저에 지시합니다.그러면 정상적으로 http://mysite.com/myawesomepdf.pdf 파일에 링크할 수 있습니다.

PDF 파일의 전체 URL을 사용하여 문제를 해결했습니다(파일 이름이나 위치를 href로 지정하는 대신). a href="domain . com/pdf/df.pdf"

다운로드 레이트를 제한할 필요가 있는 경우는, 이 코드를 사용해 주세요!!

<?php
$local_file = 'file.zip';
$download_file = 'name.zip';

// set the download rate limit (=> 20,5 kb/s)
$download_rate = 20.5;
if(file_exists($local_file) && is_file($local_file))
{
header('Cache-control: private');
header('Content-Type: application/octet-stream');
header('Content-Length: '.filesize($local_file));
header('Content-Disposition: filename='.$download_file);

flush();
$file = fopen($local_file, "r");
while(!feof($file))
{
    // send the current file part to the browser
    print fread($file, round($download_rate * 1024));
    // flush the content to the browser
    flush();
    // sleep one second
    sleep(1);
}
fclose($file);}
else {
die('Error: The file '.$local_file.' does not exist!');
}

?>

상세한 것에 대하여는, 여기를 클릭해 주세요.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>File Uploader</title>  
    <script src="../Script/angular1.3.8.js"></script>  
    <script src="../Script/angular-route.js"></script>  
    <script src="../UserScript/MyApp.js"></script>  
    <script src="../UserScript/FileUploder.js"></script>  
    <>  
        .percent {  
            position: absolute;  
            width: 300px;  
            height: 14px;  
            z-index: 1;  
            text-align: center;  
            font-size: 0.8em;  
            color: white;  
        }  

        .progress-bar {  
            width: 300px;  
            height: 14px;  
            border-radius: 10px;  
            border: 1px solid #CCC;  
            background-image: -webkit-gradient(linear, left top, left bottom, from(#6666cc), to(#4b4b95));  
            border-image: initial;  
        }  

        .uploaded {  
            padding: 0;  
            height: 14px;  
            border-radius: 10px;  
            background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));  
            border-image: initial;  
        }  
    </>  
</head>  
<body ng-app="MyApp" ng-controller="FileUploder">  
    <div>  
        <table ="width:100%;border:solid;">  
            <tr>  
                <td>Select File</td>  
                <td>  
                    <input type="file" ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)" />  
                </td>  
            </tr>  
            <tr>  
                <td>File Size</td>  
                <td>  
                    <div ng-repeat="file in files.slice(0)">  
                        <span ng-switch="file.size > 1024*1024">  
                            <span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>  
                            <span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>  
                        </span>  
                    </div>  
                </td>  
            </tr>             
            <tr>  
                <td>  
                    File Attach Status  
                </td>  
                <td>{{AttachStatus}}</td>  
            </tr>  
            <tr>  
                <td>  
                    <input type="button" value="Upload" ng-click="fnUpload();" />  
                </td>  
                <td>  
                    <input type="button" value="DownLoad" ng-click="fnDownLoad();" />  
                </td>  
            </tr>  
        </table>  
    </div>  
</body>  
</html>

언급URL : https://stackoverflow.com/questions/364946/how-to-make-pdf-file-downloadable-in-html-link

반응형
저작자표시

'programing' 카테고리의 다른 글

Panda 데이터 프레임에서 NaN 값이 들어 있는 열을 찾는 방법  (0) 2022.10.28
ownCloud 서버: DBA_DEFAULT PHP 오류  (0) 2022.10.28
텍스트 워처를 트리거하지 않고 텍스트 편집 텍스트를 변경하려면 어떻게 해야 합니까?  (0) 2022.10.28
페이지를 떠나기 전의 JavaScript  (0) 2022.10.28
테이블의 열을 카운트하려면 어떻게 해야 합니까?  (0) 2022.10.28

'programing'의 다른글

  • 현재글PDF 파일을 HTML 링크로 다운로드하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바