打印功能的几种实现方式 [print]_灯塔的打印功能怎么实现的-CSDN博客

本文链接：https://blog.csdn.net/sun2333/article/details/82702828

本文探讨了HTML中实现打印功能的多种方法，包括使用原生JavaScript，iframe，第三方库如jsPDF，以及通过字符串拼接的方式。每种方法都有其特点和适用场景，为开发者提供了不同的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

<iframe frameborder="0" id="printIframebBtn" name="printIframe" style="width:0;height:0;"></iframe>

最终版本：

$.ajax({
    url: '/print/',
    type: 'GET',
    xhrFields: { responseType: 'blob' },
    success: function (response) {
        var href = window.URL.createObjectURL(response);
        $("#printIframe").attr("src", href);
        $("#printIframe").on("load", function () {
            $("#printIframe")[0].contentWindow.print();
        })
    }
});

使用原生 XMLHttpRequest：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/print/', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
    if (this.status == 200) {
        var blob = new Blob([this.response], {type: "application/pdf"});
        var href = window.URL.createObjectURL(blob);
        $("#printIframe").attr("src", href);
        $("#printIframe").on("load", function () {
            $("#printIframe")[0].contentWindow.print();
        })
    }
};
xhr.send();

放入 iframe：

//js实现
var iframe = document.getElementById("printIframe");
iframe.setAttribute("src", '/print/');
iframe.onload = function() {
    alert('myframe is loaded');
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

// jQuery实现
$("#printIframe")[0].contentWindow.print();
$("#printIframe").attr("src", '/print/');
$("#printIframe").on("load", function () {
    alert('myframe is loaded');
    console.log($("#printIframe")[0].contentWindow, '++++++++++++++ x ++++++++++++++');
    this.doPrint();
    $("#printIframe")[0].contentWindow.print();
});

使用第三方库：

//print.min.js
printJS('/print/', 'pdf')

//jquery.PrintArea.js
$("#printResume").printArea();

网络搜索结果(结果缺少css)：

var el = document.getElementsByClassName("main-box")[0];
var iframe = document.createElement('IFRAME');
iframe.setAttribute("src", '/print/');
var doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.doc = doc;
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0) {
     document.body.removeChild(iframe);
}

使用 html 拼接方式：

var headstr = "<html><head><title></title></head><body>";
var footstr = "</body></html>";
var printData = document.getElementsByClassName("main-box")[0].innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + printData + footstr;
window.print();
document.body.innerHTML = oldstr;
return false;