js打印隐藏的div,可自定义样式

摘要:
Js需要导入电子验证结果记录表˂!

这里是全部代码,可以直接运行。js需要自行导入

js打印隐藏的div,可自定义样式第1张js打印隐藏的div,可自定义样式第2张
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="http://t.zoukankan.com/js/jquery.jqprint-0.3.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/css/print.css"/>-->
    </head>
    <body>
        <div id="printcontent" style="display: none;">
        
        <div id="print-div">
            <style type="text/css">
                .title{
                    color: red;
                }
            </style>
            <!--需要打印的都在这个div-->
            <div class="title-div">
                <span class="title">电子验印结果记录单</span>
            </div>
            <table border="0" cellspacing="" cellpadding="">
                <!--<tr><th>Header</th></tr>-->
                <tr>
                    <td>验印时间:2021-03-19 16:39:35</td>
                    <td>账号:91310120MA1HQGCT3T</td>
                </tr>
                <tr>
                    <td colspan="2">户名:上海尊煜建筑劳务有限公司</td>
                </tr>
                <tr>
                    <td>凭证金额:2.00</td>
                    <td>出票日期:2021-03-19</td>
                </tr>
            </table>
        </div>
        
        
        </div>
        <button id="printBtn">打印</button>
    </body>
    <script type="text/javascript">
        $("#printBtn").click(function() {
            doPrint3();
        })
        
        function doPrint3(){
    
    //判断iframe是否存在,不存在则创建iframe
    var iframe=document.getElementById("print-iframe");
    if(!iframe){  
            var el = document.getElementById("printcontent");
            iframe = document.createElement('IFRAME');
            var doc = null;
            iframe.setAttribute("id", "print-iframe");
            iframe.setAttribute('style', 'position:absolute;0px;height:0px;left:-500px;top:-500px;');
            document.body.appendChild(iframe);
            doc = iframe.contentWindow.document;
            //这里可以自定义样式
//          <link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/css/print.css"/>
            doc.write('<link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/css/print.css"/>');
            doc.write('<div>' + el.innerHTML + '</div>');
            doc.close();
            iframe.contentWindow.focus();            
    }
    iframe.contentWindow.print();
    document.body.removeChild(iframe);
//  if (navigator.userAgent.indexOf("MSIE") > 0){
//      document.body.removeChild(iframe);
//  }
    
}
    </script>
</html>
View Code

免责声明:文章转载自《js打印隐藏的div,可自定义样式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Qt Quick之TableView的使用vue创建全局组件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【JS】使用变量作为object的key-方法汇总

1、方法一 1 var a = 'id'; 2 var str = '{'+a+' : 12}' 3 var obj = eval("("+str+")"); 结果: 1 obj={id:12} 2、方法二 1 var a='name'; 2 var obj={}; 3 obj[a]='jack'; 结果: 1 obj={name:'jack'}...

selenium滑块操作

from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from time import sleep driver=webdriver.Chrome() driver.maximize_window() driver.ge...

JS实现点击图片放大、关闭效果

实现效果: 点击图片在弹出层显示大图,点击大图或空白区域关闭大图,图片高度宽度根据窗口大小判断 html代码 <td width="350"> <img class="pimg"height="100"width="100"src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedIma...

【译】Js基础运行机制

一、js的工作原理:引擎、运行时与调用栈概述 JavaScript引擎的一个流行示例是Google的V8引擎。比如,V8引擎用于Chrome和Node.js。 该引擎包括两个主要组件:*内存堆-这是内存分配的地方*调用堆栈-这是代码执行时堆栈帧的位置 运行时浏览器中有几乎所有JavaScript开发人员都在使用的API(例如“ setTimeout”)。...

对JS中继承的思考

名词理解:   prototype属性,是函数对象特有的属性,不存在其他对象中(函数也是对象)。每当创建一个新函数,该函数就会自动包含一个prototype属性,这个属性用来指向函数的原型对象。   prototype对象,即原型对象。 原型对象里包含着实例中需要共享的属性和方法。这里要注意,由于原型对象本身就是对象,那么默认的原型对象也是Object对...

JS拖拽系列--多元素拖拽,面向对象,es6拖拽

最近不太忙,终于有时间,研究了一下早就想搞定的拖拽系列,先是写了面向过程式的,再做一个面向对象的,再顺便弄弄继承,最后玩一下ES6的class  不觉用了一天多,收获很大。拖拽弄完,想再弄一个拖放。 上代码: 函数式简单版:   <style type="text/css"> #div1 {...