Как создать ссылку, которая запускает печать файла? - PullRequest
Новая
       20

Как создать ссылку, которая запускает печать файла?

1 голос
/ 02 октября 2009

У меня есть несколько маленьких изображений, и у каждого есть ссылка «напечатать увеличенное изображение».

Например: 

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

Когда пользователь нажимает ссылку "напечатать увеличенное изображение", моя цель - запустить печать "big.jpg".

Как это можно сделать?

РЕДАКТИРОВАТЬ: У Энтони было правильное решение для меня. Я изменил его код немного, чтобы он заработал. ЗДЕСЬ ПОЛНЫЙ, РАБОЧИЙ КОД 

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

Ответы [ 5 ]

3 голосов
/ 02 октября 2009 
<a href="javascript:window.Print(); return false;">Print Larger Image</a>

Это распечатает текущую страницу, но чтобы добавить ответ JoostK, перенаправьте на изображение: 

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

Затем в page.php загрузите ваше изображение, а затем в событии onload body вызовите window.print ();

EDIT:

Чтобы позволить пользователю оставаться на той же странице, я не верю, что это возможно, но вы могли бы сделать следующее: 

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

Затем после вызова window.print(); вы можете позвонить window.close(); (может появиться диалоговое окно с сообщением о том, что браузер хочет закрыть текущее окно, это нормально, или что-то в этом духе)

1 голос
/ 02 октября 2009

Это было бы действительно странно и круто, но одну вещь, которую вы могли бы сделать, это:

У ссылки print large image должна быть функция javascript, которая вставляет большое изображение в DOM с классом "printable_image".

Затем настройте свои правила CSS с правилами @screen и @print, которые скрывают изображение в браузере, но скрывают все, кроме изображения для распечатки.

Затем вызовите уже упомянутую функцию window.print(). Единственная загвоздка в том, что пользователи ничего не увидят, если просто захотят напечатать экран, поэтому вам нужно добавить правило @print с помощью js, чтобы избежать этого.

HTML: 

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

JS (в jquery): 

$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;
}
}
1 голос
/ 02 октября 2009

window.print () сделает это в javascript, но при этом будет напечатана только текущая страница. Если вы пытаетесь запустить img на новой вкладке и запустить команду печати, вам придется объединить несколько команд.

0 голосов
/ 02 октября 2009

Вы можете создать такую ​​ссылку, чтобы напечатать текущую страницу ... 

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

или для автоматической печати страницы, как только она загрузится, вы можете сделать что-то вроде этого ... 

<body onload="window.print();">
0 голосов
/ 02 октября 2009 
<img src="thumb.jpg" alt="Alternative text" />
<a href="big.jpg">Print Larger Image</a>

Это действительно базовый HTML, без JS / PHP или чего-либо еще.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...