<!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. element-ui学习

    1. 小技巧 使用导航路由 配置el-menu-item的index属性,如照片 也可使用数据动态配置导航菜单:参考 走马灯高度自适应 动态设置Carousel的height参数

  2. C#连接SQL server数据库

    C#连接SQL server数据库 创建一个Windows应用程序,在窗体中添加TextBox控件.Button控件.Label控件. private void button1_Click(objec ...

  3. linux最基本命令

    1.cd命令 这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切换到 ...

  4. ParserError: Error tokenizing data. C error: Expected 2 fields in line 15, saw 4

    pandas 读取泰坦尼克号数据,报错 %matplotlib inline import numpy as np import pandas as pd import re as re train ...

  5. Tomcat内存溢出解决java.lang.OutOfMemoryError: PermGen space

    背景:把两个项目同时部署在tomcat,启动快好的时候,报java.lang.OutOfMemoryError: PermGen space 原因:因为两个项目的jar包太多,JVM把里面的class ...

  6. myeclipse部署项目到tomcat-custom_location 方式

    在想要部署的路径下:1.新建一个在tomcat--->server.xml文件夹下设置的文件名 2.在新建的文件夹下新建一个  ROOT文件夹, 3.在myeclipse里面吧项目部署到 ROO ...

  7. 关于word转化成xml，图片的转换

    当word另存为xml的时候,其中的图片会以Base64编码形式展示在xml文件的特定位置, java中操作图片转换成64位编码的方式: 可将返回的64直接放在前面的未知即可:

  8. 用API爬取天气预报数据

    1.注册免费API和阅读技术文档: 注册地址:https://console.heweather.com 文档地址:https://www.heweather.com/documents/api-ur ...

  9. C#使用Redis的基本操作

    一,引入dll 1.ServiceStack.Common.dll 2.ServiceStack.Interfaces.dll 3.ServiceStack.Redis.dll 4.ServiceSt ...

  10. spider_keeper

    一 简介 spider_keeper 是一款开源的spider管理工具,可以方便的进行爬虫的启动,暂停,定时,同时可以查看分布式情况下所有爬虫日志,查看爬虫执行情况等功能. 二 安装 部署 安装环境 ...