javascript打印html页面

最新推荐文章于 2024-10-07 10:18:03 发布

最爱桃子的阿狸

最新推荐文章于 2024-10-07 10:18:03 发布

阅读量4.6k

点赞数 1

分类专栏：前端文章标签： js html

本文链接：https://blog.csdn.net/pdy8023/article/details/80340572

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、HTML设置

1.在html中设置标记

<div id="print_html">
    这里是要打印的html内容
</div>

<!--startprint-->
  这里是要打印的html内容
<!--endprint-->

二、JS打印页面

/*
 * 打印页面
 */
function printHTML(_this){
    // 获取当前页的html代码
    var bdhtml = window.document.body.innerHTML;
    /*//设置打印开始区域
    //var startStr = '<!--startprint-->';
    // 设置打印结束区域
    //var endStr = '<!--endprint-->';
    //从标记里获取需要打印的页面
    var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr));*/
    //隐藏不必要的按钮和样式
    // 通过id获取需要打印的页面
    var printHtml = document.getElementById('print_html').innerHTML;
    // 需要打印的页面
    window.document.body.innerHTML = printHtml;
    if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
        remove_ie_header_and_footer();
     }
    window.print();
    // 还原界面
    window.document.body.innerHTML = bdhtml;
    window.location.reload();
}

三、部分浏览器自带页眉页脚，需要去掉

1.在head中添加样式

<style media="print">
    @page {
        size: auto;
        margin: 0mm;
    }
</style>

2.去掉页眉页脚的js代码

//去掉页眉、页脚
function remove_ie_header_and_footer() {
    var hkey_path;
    hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
    try {
       var RegWsh = new ActiveXObject("WScript.Shell");
       RegWsh.RegWrite(hkey_path + "header", "");
       RegWsh.RegWrite(hkey_path + "footer", "");
    } catch (e) {
    }
}

本文出处：https://blog.csdn.net/pdy8023/article/details/80340572