Tôi muốn biết nếu có thể sử dụng javascript để mở cửa sổ bật lên chứa hình ảnh và đồng thời có hộp thoại in. Khi ai đó nhấp vào in, cửa sổ bật lên sẽ đóng lại.Sử dụng javascript để in hình ảnh
Điều này có dễ dàng đạt được không?
Yea, chỉ cần đặt hình ảnh trên màn hình và sau đó gọi window.print(); trong javascript và nó sẽ bật lên.
(Đây là cách Google Maps/Google Calendar làm in ấn)
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
Cách này hoạt động bằng cách sử dụng nút? Nút sẽ khởi tạo hành động này, nhưng thực sự in một hình ảnh riêng biệt. – andrew
Tôi sẽ không viết tất cả mã cho bạn, điểm của địa điểm này là để tìm hiểu. ;) Bạn sẽ làm điều đó bằng cách sử dụng sự kiện onmouseup trên nút: http://www.w3schools.com/jsref/event_onmouseup.asp –
Tôi không muốn bạn viết nó cho tôi ... chỉ muốn được chỉ vào đúng tài nguyên. Tôi cần một nơi để bắt đầu. Cảm ơn. – andrew
Sử dụng này trong khối đầu
<script type="text/javascript">
function printImg() {
pwin = window.open(document.getElementById("mainImg").src,"_blank");
pwin.onload = function() {window.print();}
}
</script>
sử dụng này trong khối cơ thể
<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image" onclick="printImg()" />
Điều này không hoạt động trong bảng điều khiển của Chrome. – Flea777
này hoạt động trong Chrome:
<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>
Mã này sẽ mở YOUR_IMAGE_URL trong cửa sổ bật lên, hiển thị hộp thoại in và đóng cửa sổ bật lên sau khi in.
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();
Một giải pháp tuyệt vời !! Tất cả tín dụng đi vào 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>
Xem toàn bộ ví dụ ở đây: http://www.codescratcher.com/javascript/print-image-using-javascript/#comment-762
tại sao có thời gian chờ 10 ms? Tại sao không chỉ đơn giản là '' –
Shasak
Trang web của người quản lý mã đó hơi khó hiểu khi tôi tải mã này lên tài khoản github của tôi: Xem demo làm việc tại đây https://rawgit.com/orellabac/printFromJavascript/master/Print_Image.htm mã tại: https: //github.com/orellabac/printFromJavascript/ – orellabac
tôi chỉ cần bỏ ra 45 phút về vấn đề "đơn giản" này, cố gắng để có được nó theo cách tôi muốn nó hoạt động.
Tôi đã có hình ảnh bên trong thẻ img, được tạo động bởi plugin jQuery Barcode mà tôi phải in. Tôi muốn nó in ở cửa sổ khác và sau đó đóng cửa sổ lại. Điều này được cho là xảy ra sau khi người dùng nhấp vào nút bên trong plugin jQuery Grid, bên trong hộp thoại jQuery-UI cùng với bộ mở rộng hộp thoại jQuery-UI được áp dụng cho nó.
Tôi đã điều chỉnh mọi câu trả lời cho đến khi cuối cùng tôi nghĩ ra điều này, có thể nó có thể giúp một ai đó.
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);
Các setTimeout là không chỉ dành riêng cho shits và tiếng cười khúc khích, đó là cách duy nhất tôi tìm thấy Firefox 42 sẽ đạt những chức năng. Nó sẽ chỉ đơn giản là bỏ qua các chức năng .close() cho đến khi tôi thêm một điểm dừng vào nó, sau đó nó hoạt động hoàn hảo. Vì vậy, tôi giả sử nó tạo ra những trường hợp cửa sổ trước khi nó có thể áp dụng chức năng sự kiện onbeforeload và chức năng sự kiện onafterprint, hoặc một cái gì đó.
Tuyệt. Nhưng nếu tôi muốn một hình ảnh khác để cho thấy rằng bắt đầu cửa sổ popup? – andrew
Xem các kiểu CSS để in. Về cơ bản, bạn có thể ẩn hình ảnh trên màn hình và sau đó hiển thị cho chế độ xem bản in. –