<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
        
            function do_print(id_str){
                //id-str 打印区域的id
                var el = document.getElementById(id_str);
                var iframe = document.createElement('IFRAME');
                var doc = null;
                iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
                document.body.appendChild(iframe);
                doc = iframe.contentWindow.document;
                // 引入打印的专有CSS样式，根据实际修改       
                //doc.write("<LINK rel=\"stylesheet\" type=\"text/css\" href=\"css/print.css\">");
                doc.write('<div>' + el.innerHTML + '</div>');
                doc.close();       
                iframe.contentWindow.focus();
                iframe.contentWindow.print();
                if (navigator.userAgent.indexOf("MSIE") > 0){
                    document.body.removeChild(iframe);      
                }
            }
        </script>
    </head>
    <body>
        <!--打印区域： -->
        <div id="print_box">
            <div style="width: 500px; height: 500px; border: 5px solid #6b3906;">
                <h1>hello kitty!</h1>
            </div>
        </div>
        <!--// 调用打印 -->
        <button onclick="javascript:do_print('print_box');">打印</button>
        
    </body>
</html>

实战项目中的使用

$scope.do_print = function (id_str) {
        //id-str 打印区域的id
        var el = document.getElementById(id_str);
        var iframe = document.createElement('IFRAME');
        var doc = null;
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
        document.body.appendChild(iframe);
        doc = iframe.contentWindow.document;
        // 引入打印的专有CSS样式，根据实际修改       
        //doc.write("<LINK rel=\"stylesheet\" type=\"text/css\" href=\"css/print.css\">");
        if ($scope.orderinfo.inv==null) {
            var txt = "table{border-collapse:collapse;border-spacing:0;border-left:1px solid #000000;border-top:1px solid #000000;} td{border: 1px solid #000000;}th{border: 1px solid #000000;}#changefapiao{visibility: hidden;} .change{border-right: 0px solid #000000;}.change1{border-left: 0px solid #000000;} .title{text-align:center;} #fapiao{display:none;}";
        }
        else {
            var txt = "table{border-collapse:collapse;border-spacing:0;border-left:1px solid #000000;border-top:1px solid #000000;} td{border: 1px solid #000000;}th{border: 1px solid #000000;}#changefapiao{visibility: hidden;} .change{border-right: 0px solid #000000;}.change1{border-left: 0px solid #000000;} .title{text-align:center;}";
        }
        doc.write('<style>' + txt + '</style>');
        doc.write('<body>' + el.innerHTML + '</body>');
        doc.close();
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf("MSIE") > 0) {
            document.body.removeChild(iframe);
        }
    }

js 打印指定页面部分打印的更多相关文章

  1. 用JS在html页面实现打印功能

    首先在head里面加入下面一段js代码: <script language="javascript"> function preview(oper) { if (ope ...

  2. [html]js打开指定页面

    1.在当前窗口打开 location.href = "http://www.baidu.com"; 2.可以设置开发方式 window.open("http://www. ...

  3. web页面内容打印总结

    web页面打印有两种,一种是直接调用window.print()命令操作,一种是使用ActiveX插件(Object标签)操作,但是第二种只支持IE内核的浏览器. 示例1: <!DOCTYPE ...

  4. 【JS】window.print打印指定内容

    有时候网页用到打印但是不想打印所有内容,就需要只打印指定内容,下面简单演示下如何打印指定内容 1.在需要打印的指定内容的头部前面加“<!--startprint-->”,在尾部后面加上“& ...

  5. 打印web页面指定区域的三种方法

    本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...

  6. js打印WEB页面内容代码大全

    第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="tex ...

  7. android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

    Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...

  8. jQuery打印Html页面自动分页

    最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件 用法: $("div#printmain").printArea(); 但还 ...

  9. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

随机推荐

  1. K8s集群安装--最新版 Kubernetes 1.14.1

    K8s集群安装--最新版 Kubernetes 1.14.1 前言 网上有很多关于k8s安装的文章,但是我参照一些文章安装时碰到了不少坑.今天终于安装好了,故将一些关键点写下来与大家共享. 我安装是基 ...

  2. 如何防止Unity3D代码被反编译？

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 网易云易盾移动游戏安全技术专家陈士留在2018年Unity技术路演演讲内容中对这个问题有过比较详细的介绍,摘录如下: 防止Unity3D代码被反编译 ...

  3. SCPO2015 小凸玩矩阵

    题目链接:戳我 二分答案+最大流. 看到第K大的数的最小值是多少,我们想到二分,把他转化为最大数最小问题--二分一个数x,如果有>=n-k+1个数不比它大,那么它就应当不大于当前数,否则应当大于 ...

  4. OI树上问题 简单学习笔记

    判断链 每个点的度数不超过2 判断树 n个点,n-1条边 每两个点之间的路径唯一 多叉树转换成二叉树 第一个孩子作为左孩子,第一个孩子的兄弟作为它的右孩子. 树的重心 树上一点,满足删除该点时,树内剩 ...

  5. 透明数据加密 (TDE)常见问题解答

    透明数据加密 (TDE)常见问题解答问题任何人只要有权访问加密数据就能对其进行解密吗?TDE 会带来哪些开销?哪些加密算法可与 TDE 一同使用?可以使用第三方加密算法代替 TDE 提供的算法吗?可以 ...

  6. jquery源码解析：pushStack，end，ready，eq详解

    上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype ...

  7. 为什么 SQLite 用 C 编写？

    简评:SQLite 官方出品. C是最好的选择 从 2000 年 5 月 29 日开始,SQLite 就选择了 C 语言.直到今天,C 也是实现 SQLite 这样软件库的最佳语言. C语言是实现 S ...

  8. TX2之多线程读取视频及深度学习推理

    背景 一般在TX2上部署深度学习模型时,都是读取摄像头视频或传入视频文件进行推理,从视频中抽取帧进行目标检测等任务.对于大点的模型,推理的速度是赶不上摄像头或视频的帧率的,如果我们使用单线程进行处理, ...

  9. 牛客 Wannafly挑战赛27 D 绿魔法师

    传送门 \(\color{green}{solution}\) 分析下,在\(1e5+1\)内,一个数的约数个数最多为\(2^{6}\)个,所以我们可以考虑枚举约数 复杂度\(O(N^{2^{6 \t ...

  10. head first

      1, insert 单引号时,使用/转义 2, 不要用NULL, 查找时使用isNull 来判断. 3, 用and / or 连接两个not 时,要写两个NOT 4,delete from tab ...