Использование javascript для печати изображений

Я хотел бы узнать, можно ли использовать javascript для открытия всплывающего окна, содержащего изображение, и в то же время иметь диалоговое окно печати. Когда кто-то нажимает на печать, всплывающее окно закрывается.Использование javascript для печати изображений

Это легко достижимо?

источник

2010-05-25 andrew

Да, просто поместите изображение на экран, а затем позвоните window.print(); в javascript, и он должен всплывать.

(Это, как Google Maps/Google Календарь сделать печать)

источник

2010-05-25 22:44:52

Прохладный. Но что, если я хочу, чтобы другое изображение показывало, что инициирует всплывающее окно? – andrew

Ознакомьтесь со стилями CSS для печати. Вы можете в основном иметь изображение, скрытое на экране, а затем видимое для вида печати. –

popup = window.open(); 
popup.document.write("imagehtml"); 
popup.focus(); //required for IE 
popup.print();

источник

2010-05-25 22:48:31

Как это работает с помощью кнопки? Кнопка инициирует это действие, но на самом деле печатает отдельное изображение. – andrew

Я не собираюсь писать весь код для вас, точка этого места - учиться. ;) Вы сделали бы это, используя событие onmouseup на кнопке: http://www.w3schools.com/jsref/event_onmouseup.asp –

Я не хочу, чтобы вы его записали для меня ... просто хочу следует указать на правильные ресурсы. Мне нужно место для начала. Благодарю. – andrew

Используйте это в головном блоке

<script type="text/javascript"> 
function printImg() { 
    pwin = window.open(document.getElementById("mainImg").src,"_blank"); 
    pwin.onload = function() {window.print();} 
} 
</script>

использовать это в блоке тела

<img src="images.jpg" id="mainImg" /> 
<input type="button" value="Print Image" onclick="printImg()" />

источник

2012-09-04 03:21:50

Это не работает в консоли Chrome. – Flea777

Этот работает в Хром:

<body ><img src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;"> 

      <script type="text/javascript"> 
       window.onload = function() { 
        window.print(); 
        setTimeout(function() { 
         window.close(); 
        }, 1); 
       }; 
      </script> 
    </body>

источник

2014-04-30 18:20:54

Этот код откроет YOUR_IMAGE_URL во всплывающем окне, отобразит диалоговое окно печати и закроет всплывающее окно после печати.

var popup; 

function closePrint() { 
    if (popup) { 
     popup.close(); 
    } 
} 

popup = window.open(YOUR_IMAGE_URL); 
popup.onbeforeunload = closePrint; 
popup.onafterprint = closePrint; 
popup.focus(); // Required for IE 
popup.print();

MDN Reference code

источник

2014-06-04 09:02:43

Еще одно большое решение !! Все заслуга Codescratcher

<script type="text/javascript"> 
function ImagetoPrint(source) { 
    return "<html><head><script>function step1(){\n" + 
      "setTimeout('step2()', 10);}\n" + 
      "function step2(){window.print();window.close()}\n" + 
      "</scri" + "pt></head><body onload='step1()'>\n" + 
      "<img src='" + source + "' /></body></html>"; 
} 
function PrintImage(source) { 
    Pagelink = "about:blank"; 
    var pwa = window.open(Pagelink, "_new"); 
    pwa.document.open(); 
    pwa.document.write(ImagetoPrint(source)); 
    pwa.document.close(); 
}

<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>

Смотрите полный пример здесь: http://www.codescratcher.com/javascript/print-image-using-javascript/#comment-762

источник

2015-08-11 13:27:17

Почему существует тайм-аут 10 мс? Почему бы просто не просто «» – Shasak

Этот сайт sccratcher немного запутанный. Я загрузил этот код в свою учетную запись github: см. Рабочую демонстрацию здесь. Https://rawgit.com/orellabac/printFromJavascript/master/Print_Image.htm код находится по адресу: https: //github.com/orellabac/printFromJavascript/ – orellabac

Я только что провел 45 минут на этом "SIMPLE" проблемы, пытаясь получить его так, как я хотел, чтобы он работал.

У меня было изображение внутри тега img, динамически генерируемого плагином , который мне пришлось печатать. Я хотел, чтобы он печатался в другом окне, а затем закрывал окно. Все это должно было произойти после того, как пользователь нажал кнопку внутри плагина jQuery Grid, внутри диалогового окна jQuery-UI, а также добавленного к нему диалогового расширителя jQuery-UI.

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

w = window.open(document.getElementById("UB-canvas").src); 
w.onload = function() { w.print(); } 
w.onbeforeunload = setTimeout(function() { w.close(); },500); 
w.onafterprint = setTimeout(function() { w.close(); },500);

setTimeout не только для чертовых и хихиканья, это единственный способ, которым я нашел Firefox 42 ударю эти функции. Он просто пропустил бы функции .close() до тех пор, пока я не добавлю к нему точку останова, тогда она отлично работала. Поэтому я предполагаю, что он создал эти экземпляры окон, прежде чем он сможет применить функцию события onbeforeload и функции события onafterprint или что-то еще.

источник

2015-12-02 18:42:42 Kickass

Использование javascript для печати изображений

ответ

Смежные вопросы