클릭시 href 이미지 링크 다운로드 href=”https://stackoverflow.com/path/to/image”><img src=”/path/to/image”

<a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>웹 앱에서 와 같은 일반 링크를 생성 합니다.

링크를 클릭하면 새 페이지에 사진이 표시됩니다. 사진을 저장하려면 사진을 마우스 오른쪽 버튼으로 클릭하고 “다른 이름으로 저장”을 선택해야합니다.

나는이 행동을 원하지 않는다. 링크를 클릭 할 때 다운로드 상자가 나타나기를 원한다 .html 또는 javascript로 가능합니까? 어떻게?

그렇지 않다면 download.php 스크립트를 작성하고 파일 이름을 매개 변수로 href로 호출해야한다고 생각합니까?

답변

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

아직 완전히 지원되지는 않지만 http://caniuse.com/#feat=download 이지만 modernizr https://modernizr.com/download/?adownload-setclasses ( Non-core detects ) 와 함께 사용 하여 지원 여부를 확인할 수 있습니다 브라우저.

답변

이미지 또는 HTML에 대한 다운로드 링크를 작성하는 가장 쉬운 방법은 다운로드 속성을 설정하는 것이지만이 솔루션은 최신 브라우저에서만 작동합니다.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

“myimage”는 다운로드 할 파일의 이름입니다. 확장 프로그램이 자동으로 추가됩니다.
여기 예

답변

<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

download.php :

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>

답변

아닙니다. 파일을 인라인 대신 첨부 파일로 설정하기 위해 Content-Disposition 헤더를 보내려면 서버에 무언가가 필요합니다. 그러나 일반 Apache 구성 으로이 작업을 수행 할 수 있습니다.

더 간단한 방법이 있다는 것을 알고 있지만 mod_rewrite 사용하여 예제를 찾았 습니다.

답변

HTML5를 사용하는 경우 ‘다운로드’속성을 링크에 추가 할 수 있습니다.

<a href="/test.pdf" download>

http://www.w3schools.com/tags/att_a_download.asp

답변

이 시도…

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>

답변

사용자가 하이퍼 링크를 클릭 할 때 대상이 다운로드되도록 지정하는 HTML 다운로드 속성.

이 속성은 href 속성이 설정된 경우에만 사용됩니다.

속성 값은 다운로드 한 파일의 이름이됩니다. 허용되는 값에는 제한이 없으며 브라우저는 자동으로 올바른 파일 확장자를 감지하여 파일 (.img, .pdf, .txt, .html 등)에 추가합니다.

예제 코드 :

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

HTML5 :

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>

출력 :

이미지 다운로드 >>

HTML5 다운로드 또는 크롬

이미지 다운로드 >>