<!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. Mysql链接字符串问题

    <add key="ConnstringMySql" value="server=xxx.xxx.xxx.xxx;database=YourDatabase;uid ...

  2. navicat 导入txt到数据库

    一直都是建库 一条条添加数据 昨天碰上要导入一堆数据突然不知所措 查资料才弄好,先记录一下,以免忘记 这个是导入的数据名可以改 对导入数据表进行增删改 以上!

  3. “全栈2019”Java第六十四章：接口与静态方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. 淘宝内部分享：MySQL & MariaDB性能优化 【转】

    MySQL· 5.7优化·Metadata Lock子系统的优化 背景 引入MDL锁的目的,最初是为了解决著名的bug#989,在MySQL 5.1及之前的版本,事务执行过程中并不维护涉及到的所有表的 ...

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

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

  6. python高级（六）——用一等函数实现设计模式

    本文主要内容 经典的“策略”模式 python高级——目录 文中代码均放在github上:https://github.com/ampeeg/cnblogs/tree/master/python高级 ...

  7. 主流服务器虚拟化技术简单使用——Xen（二）

    管理多台Xen主机可以使用GUI工具virt-manager和xm.xl等命令行工具. Tips:hypervisor一定要选到Xen web管理工具 Xen也有一个简易web管理工具叫xenwebm ...

  8. Angular material mat-icon 资源参考_Action

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  9. stark - 3 ⇲自动生成URL及视图

    以往建立了一张表,需要 1.为每张表创建4个url 2.为每张表创建4个视图函数 urlpatterns = [ url('^role/list/$',role.role_list,name='rol ...

  10. SQL多字段排序

    emm 其实也没什么 就是写sql查询的时候 要对多个字段排序比如  查询原本的数据是 年份 科目 批次 2014 理科 本二2015 理科 本二 2015 理科 本一2016 理科 本二 2016 ...