<!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. 使用bmfont制作字体

    本地显示正常 将制作好的字体上传 别人用不好使 制作完场景没ctrl+s 保存 ctrl+s保存之后生成另外的文件

  2. C# 代码 获取桌面路径

    Environment.GetFolderPath(Environment.SpecialFolder.MyComputer); // // 摘要: // 获取由指定枚举标识的系统特殊文件夹的路径. ...

  3. Android Post方式发送信息和获取URL中的图片

    需要Internet权限,AndroidManifest.xml <uses-permission android:name="android.permission.INTERNET& ...

  4. 读取二元组列表，打印目录的层级结构-----C++算法实现

    要求是--某个文件中存储了一个最多3层的层级结构,其中每个元素都是一个自然数,它的存储方法是一个二元组的列表,每个二元组的形式为:(元素,父元素).现在希望能够通过读取该二元组列表,打印出目录的层级结 ...

  5. python字符串的切片

    # 字符串的切片 """ (5)字符串的切片 :切片就是截取字符串的意思 (1)语法 =>字符串[::] 完整格式:[开始索引:结束索引:间隔值 (2)[:结束索引 ...

  6. [ 转 ] windows环境%变量%大全

    一.定义 环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比如临时文件夹位置和系统文件夹位置等.这点有点类似于DOS时期的默认路径,当你运行某些程序时除了在当前文件夹中寻找外,还会到设 ...

  7. jxl操作excel单个单元格换行和获取换行

    excel中同表格换行: a+"\n"+b 1.读取 String str = sheet.getCell(c, r).getContents(); String[] split ...

  8. jxl读取excel

    String path=""; String path2=""; File file = new File(path); File file2 = new Fi ...

  9. uC/OS-II 函数之OSInit()

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 对于有热心的小伙伴在微博上私信我,说我的uC/OS-II 一些函数简介篇幅有些过于长应该分开介绍.应小伙伴的要求,特此将文章分开进行讲解.本文主要 ...

  10. 两种 js下载文件的步骤

    ----------------------------------引用地址链接------------------------------------------------- http://www ...