2009-10-02 3 views
1

작은 이미지가 있고 각 이미지에 "큰 이미지 인쇄"링크가 있습니다. 예를 들어파일 인쇄를 트리거하는 링크를 만드는 방법은 무엇입니까?

는 :

<img src="thumb.jpg"> 
<a href="#">Print Larger Image</a> 

사용자가 "인쇄 큰 이미지"링크를 클릭

, 내 목표는 "big.jpg"의 인쇄를 실행하는 것입니다.

어떻게이 작업을 수행 할 수 있습니까?

편집 : 안토니는 나를 위해 올바른 해결책을 가졌습니다. 나는 그의 코드를 수정하기 위해 비트를 수정했다. 여기에 전체 코드 정말 기본적인 HTML의

<style> 
@media screen { 
.printimage { 
    display: none; 
} 
} 

@media print { 
body * { 
    display: none; 
} 
.printimage { 
    display: block; 
} 
} 

</style> 

<a id="bigimage" href="#">Print Big Image</a> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

    $("#bigimage").click(function() { 
      $("body").append("<img src='http://sstatic.net/so/img/logo.png' class='printimage' >"); 
      window.print(); 
    }); 

}); 

</script> 
+0

인쇄 바로 표시 수단? – KB22

+0

그랬다면 몇 분 전의 질문과 중복 될 수 있습니다. – pavium

+0

인쇄하여 표시하는 것이 아닙니다. 내 목표는 다음과 같습니다. 사용자가 "인쇄"링크를 클릭하면 그는 동일한 페이지에 머물러 있으며 브라우저의 "인쇄"대화 상자가 나타납니다. 다음으로, 사용자는 "OK"버튼을 클릭하여 "big.jpg"파일 인쇄를 시작할 수 있습니다. – edt

답변

1

<a href="JavaScript:window.print();">Print this page</a> 

또는 즉시이로드 페이지, 당신이 뭔가를 할 수있는 자동 인쇄에

..., 하지만 당신이 할 수있는 한가지는 :

print large image 링크가 "printable_image"클래스로 DOM에 더 큰 이미지를 삽입하는 자바 스크립트 기능을 트리거하게하십시오.

그런 다음 CSS 규칙을 @screen@print 규칙으로 설정하여 브라우저의 이미지를 숨기고 인쇄물의 모든 이미지는 숨길 수 있습니다.

그런 다음 이미 언급 한 window.print() 함수를 호출하십시오. 유일한 단서는 사용자가 화면을 인쇄하고 싶다면 아무 것도 볼 수 없다는 것입니다. 따라서 이것을 피하려면 @print 규칙에 js를 추가해야합니다.

되는 HTML :

<img src="thumb.jpg"> 
<a href="#" id="bigimage">Print Larger Image</a> 

(JQuery와 단위) JS :

$function() { 
    $("#bigimage").click(function() { 
      $(body).amend("<img src='bigimage.png' class="printimage" />"); 
    }); 
}); 

CSS :

@media screen { 
.printimage { 
    display: none; 
} 
} 

@media print { 
body * { 
    display: none; 
} 
.printimage { 
    display: block; 
} 
} 
+0

좋은 해결책,하지만 나에게 소리가 너무 많은 작품;) 매우 창의적. 또한 항상 사용자가 자바 스크립트를 사용하지 않도록 설정할 수 있습니다. . . . – andrewWinn

+0

js가 꺼져있는 경우 주어진 솔루션 중 어느 것도 작동하지 않습니다. – Anthony

+0

사실. 당신은 단지 오른쪽 클릭하고 이미지를 열 사용자에게 지시 할 수 :) – andrewWinn

0
<img src="thumb.jpg" alt="Alternative text" /> 
<a href="big.jpg">Print Larger Image</a> 

에게 작업 'S는 어떤 JS/PHP 또는이 전혀 필요하지 않습니다.

1

window.print()는 javascript에서 수행하지만 현재 페이지 만 인쇄합니다. img를 새 탭으로 실행하고 print 명령을 실행하려는 경우 몇 가지 명령을 결합해야합니다. 다음 신체 onload 이벤트에서,

<a href="page.php?image=big.jpg">Print Larger Image</a> 

을 다음 page.php에, 당신의 이미지를로드 :

3
<a href="javascript:window.Print(); return false;">Print Larger Image</a> 

이 현재 페이지를 인쇄하지만 JoostK의 대답에 추가 할 이미지로 리디렉션 window.print()를 호출하십시오.

편집 :

은 사용자가, 내가 믿지 않는 동일한 페이지에 체류 할 수 있도록하려면 가능하지만, 당신이 할 수있는 것은 : 당신을 window.print();를 호출 한 후 다음

<a href="page.php?image=big.jpg" target="_blank">Print Larger Image</a> 

window.close();에 전화 할 수 있습니다 (브라우저가 현재 창을 닫으려는 대화 상자가 나타납니다.)

+0

"인쇄"버튼을 클릭 한 후 사용자가 동일한 페이지에 머물러 있기를 바랍니다. AJAX로 그런 일을 할 수있는 방법이 있습니까? – edt

0

다음과 같은 링크를 만들 수 있습니다 ... 현재 페이지를 인쇄이 정말 이상하고 좋지 않을까

<body onload="window.print();"> 
관련 문제