Cách tạo button printer một element bằng javascript

19/09/2022 12:56 304

Table of Contents

Cách tạo button printer một element bằng javascript, đôi lúc chúng ta dự án khách yêu cầu show cửa sổ printer cho một vùng nào đó thì làm như thế nào

Code hiển thị cửa sổ bởi một element nào đó

đợn lệnh dưới với trigger-print là id của button, còn article-content là thẻ article chứa nội dung bài viết cần print

jQuery(function () {
    jQuery("#trigger-print").click(function () {
        var contents = jQuery("#article-content").html();
        var frame1 = jQuery('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        jQuery("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>Cửa sổ printer</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
	
    
});

jQuery(function () {

jQuery("#trigger-print").click(function () {

var contents = jQuery("#article-content").html();

var frame1 = jQuery('<iframe />');

frame1[0].name = "frame1";

frame1.css({ "position": "absolute", "top": "-1000000px" });

jQuery("body").append(frame1);

var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;

frameDoc.document.open();

//Create a new HTML document.

frameDoc.document.write('<html><head><title>Cửa sổ printer</title>');

frameDoc.document.write('</head><body>');

//Append the external CSS file.

//Append the DIV contents.

frameDoc.document.write(contents);

frameDoc.document.write('</body></html>');

frameDoc.document.close();

setTimeout(function () {

window.frames["frame1"].focus();

window.frames["frame1"].print();

frame1.remove();

}, 500);

});

In toàn page hiện tại

jQuery("#trigger-print").click(function () {
window.print()
});

jQuery("#trigger-print").click(function () {

window.print()

});

Bonus luôn nut copy url hiện tại

với trigger-copy a là button chưa url

jQuery(document).on('click', '#trigger-copy a', function(e){
		e.preventDefault();
		const link = jQuery(this).attr("href");
		navigator.clipboard.writeText(link);

  		// Alert the copied text
  		alert("Đã copy: " + link);
	});

jQuery(document).on('click', '#trigger-copy a', function(e){

e.preventDefault();

const link = jQuery(this).attr("href");

navigator.clipboard.writeText(link);

// Alert the copied text

alert("Đã copy: " + link);

});

Các bài viết khác có thể hữu ích với bạn

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]
fix lỗi MySQL server has gone away SET FOREIGN_KEY_CHECKS = ON khi import mysql [ 31/03/2022 15:40 ]

Cách tạo button printer một element bằng javascript

Code hiển thị cửa sổ bởi một element nào đó

In toàn page hiện tại

Bonus luôn nut copy url hiện tại

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)