精华内容
下载资源
问答
  • 怎么选择性打印页面
    千次阅读
    2021-06-13 03:25:31

    通过本教程可以实现,将印web网页指定区域的内容,本教程将提供三种方法实现。

    方法一:打印网页指定区域

    HTML

    在需要打印的内容

    // 页面上的内容大小调整可以css调整或容器包容 打印容器内的内容就可以了

    JS

    function doPrint() {

    bdhtml=window.document.body.innerHTML;

    sprnstr="";

    eprnstr="";

    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

    window.document.body.innerHTML=prnhtml;

    window.print();

    window.document.body.innerHTML=bdhtml;

    }

    方法二:指定打印区域

    把要打印的内容放入一个span或div,然后通过一个函数打印。

    代码如下:这里是要打印的内容

    所有内容

    div2的内容

    打印

    function printme(){

    document.body.innerHTML=document.getElementById('div1').innerHTML+'
    '+document.getElementById('div2').innerHTML;

    window.print();

    }

    方法三:使用CSS

    定义一 个.noprint的class,将不打印的内容放入这个class内。

    代码如下:

    .noprint{visibility:hidden}

    这 里是要打印的内容。

    这里是不打印的内容。

    更多相关内容
  • jQuery实现页面选择性打印功能

    千次阅读 2013-09-18 10:05:22
    对于页面信息的打印相信很多项目当中都会遇到,今天将最近项目中的打印功能记录下来,以备日后使用。打印内容相对比较灵活 1、创建打印按钮 打印 2、打印时调用的函数 function doPrint() { $("#china,#tr_...
    对于页面信息的打印相信很多项目当中都会遇到,今天将最近项目中的打印功能记录下来,以备日后使用。打印内容相对比较灵活
    1、创建打印按钮
    <a class="print" href="javascript:;" style="margin-left: 800px;" onClick="doPrint()">打印</a>
    
    
    2、打印时调用的函数
    function doPrint() { 
    	$("#china,#tr_basicss,#people,#times,#information").hide();
    	$(".biao").css("display","block");
    	$(".td_text").css("line-height: 30pt"); 
    	$(".san,.gong,.chan,.dang,.print,.def,.ge").css("display","none");
    	$("td,b").css("font-size","20px"); //设置打印时的字体大小
    	$(".bianhao,.font").css("font-size","20px");
    	$(".fonts").css("font-size","50px");
    	$("#approveInfo,.styles,.disposalreg,.disposalprecept,.stepresult,.zjcontent,.content,.approveinfo,.pcqk").css
    ("line-height","28pt");//line-height设置行间距
    $(".styles,.disposalreg,.disposalprecept,.stepresult,.zjcontent,.content,.approveinfo,.pcqk").css
    ("font-size","20px");bdhtml=window.document.body.innerHTML; //获取当前页的html代码
    sprnstr="<!--startprint-->"; //设置打印开始区域       
    eprnstr="<!--endprint-->"; //设置打印结束区域      
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始代码向后取html       
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //从开始代码向钱取html
    window.document.body.innerHTML=prnhtml; window.print(); }


    展开全文
  • html页面实现打印功能

    千次阅读 2020-06-14 23:12:19
    html页面实现打印功能可用代码效果截图 之前领导让我写一个html页面,可以进行打印,我上网搜了一下,html页面实现打印功能的博客有很多,这里我就不一一介绍了,直接上干货。 可用代码 <!DOCTYPE html> <...

    html页面实现打印功能


    之前领导让我写一个html页面,可以进行打印,我上网搜了一下,html页面实现打印功能的博客有很多,这里我就不一一介绍了,直接上干货。

    可用代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>xxxx信息系统</title>
        <link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css">
        <style>
            /*纯CSS写法*/
            .checkbox-group input{display:none;opacity:0;}
            .checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label {
                line-height: 1;
                position: relative;
                /* display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                cursor: pointer;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center; */
                margin:2px; 
            }
            .checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {
                line-height: 20px;
                display: inline-block;
                width: 18px;
                height: 18px;
                margin-right: 8px;
                content: '';
                color: #fff;
                border: 1px solid #dce4e6;
                background-color: #f3f6f8;
                border-radius: 3px;
            }
            .checkbox-group input[type=checkbox]:checked+label:before,.checkbox-group input[type=radio]:checked+label:before{
                /**content:'\2022';圆点*/
                content:'\2713';
                color:#fff;
                background-color: #31b968;
                border-radius: 3px;
                font-size:23px;
                text-align: center;
                border-color: #000000;
            } 
            .noprint { display:none;}
        </style>
    </head>
    <script>
        function preview(oper) {
            if(oper < 10){
             bdhtml=window.document.body.innerHTML;
            // 打印开始的标志
            sprnstr="<!--startprint-->";
            // 打印结束的标志
             eprnstr="<!--endprint-->";
            // 从打印开始的位置截取到末尾
             prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
             // 从开始截取到打印结束的位置
             prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
             // 替换html
             window.document.body.innerHTML=prnhtml;
            // 打印
             window.print();
             window.document.body.innerHTML = bdhtml;
            }else{
                window.print();
            }
        }
    </script>
    <body>
        <div>
            <input type="button" onclick="preview(1)" value="打印">
        </div>
        <!--startprint-->
        <div style="page-break-after:always">
        <h1 style="text-align: center;">xxxx申请表</h1>
        <br>
        <!--内容-->
        <table border="1" cellpadding="0" cellspacing="0" width="700px" height="700px" align="center">
            <!--申请人情况-->
            <tr>
                <th width="60px"rowspan="12" align="center"><br><br><br><br><br><br><br><br></th>
                <th colspan="6" rowspan=""align="center">权利人</th>
            </tr>
            <tr class="con">
                <td align="center" style="width: 150px;">权利人姓名(名称)</td>
                <td colspan="5" align="center"></td>      
            </tr>
            <tr>
                <td align="center">证件种类</td>
                <td colspan="5" align="center"></td>
            </tr>
            <tr>
                <td align="center">证件号</td>
                <td colspan="5" align="center"></td>
            </tr>
            <tr>
                <td align="center">通讯地址</td>
                <td colspan="2" align="center"></td>
                <td align="center" style="width: 100px;">邮编</td>
                <td colspan="2" align="center"></td>
            </tr>
            <tr>
                <td align="center">法人代表或负责人</td>
                <td colspan="2" align="center"></td>
                <td align="center">联系电话</td>
                <td colspan="2" align="center"></td>
            </tr>
            <tr>
                <th colspan="6" rowspan=""align="center">义务人</th>
            </tr>
            <tr>
                <td align="center">义务人姓名(名称)</td>
                <td colspan="5" align="center"></td>
            </tr>
            <tr>
                <td align="center">证件种类</td>
                <td colspan="5" align="center"></td>
            </tr>
            <tr>
                <td align="center">证件号</td>
                <td colspan="5" align="center"></td>
            </tr>
            <tr>
                <td align="center">通讯地址</td>
                <td colspan="2" align="center"></td>
                <td align="center">邮编</td>
                <td colspan="2" align="center"></td>
            </tr>
            <tr>
                <td align="center">法人代表或负责人</td>
                <td colspan="2" align="center"></td>
                <td align="center">联系电话</td>
                <td colspan="2" align="center"></td>
            </tr>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" width="700px" height="100px" align="center" style="border:2px solid #000000;">
            <!-- <div border="1"> -->
                <tr  border="0">
                    <td colspan="2" align="center" style="padding-top: 20px;padding-bottom: 10px;"><span>本申请人对填写的上述内容及提交的申请材料的真实性负责。如有不实,申请人愿承担法律责任。</span></td>
                </tr>
                <tr border="0">
                    <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">申请人(签章):</td>
                    <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">申请人(签章):</td>
                </tr>
                <tr border="0">
                    <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">(权利人)</td>
                    <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">(义务人)</td>
                </tr>
                <tr border="0">
                    <td colspan="" align="center" style="padding-top: 10px;padding-bottom: 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                    <td colspan="" align="center" style="padding-top: 10px;padding-bottom: 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                </tr>
             <!-- </div> -->
        </table>
    </div>
    </div>
    <!--endprint-->
        <br>
        <br>
        <br>
        <br>
        <br>       
    </body>
    </html>
    

    效果截图

    在这里插入图片描述

    在这里插入图片描述
    上面两张图就是效果图,第一张是在浏览器运行后的截图,第二张图片是保存为pdf的截图。

    展开全文
  • GitHub地址:打印项目源码 一、环境: 项目:vue+element 二、实现效果: 1.项目内预览效果 2.打印预览效果 三、代码实现 <div id='content'> <div class='paging'> paging类名为分页符,此功能...
    GitHub地址:打印项目源码
    一、环境:

    项目:vue+element

    二、实现效果:

    1.项目内预览效果
    在这里插入图片描述

    2.打印预览效果
    在这里插入图片描述

    三、代码实现
    <div id='content'>
    	<div class='paging'>
    		paging类名为分页符,此功能必须嵌套内容才会生效。
    	</div>
    </div>
    
    import printCss from './printCss.js'
    import '../../assets/css/print.css'
    //methods
    doPrint(){
      const el = document.getElementById('content');
      //删除上一个 start
      const del = document.getElementById('iframe')
      if(del){document.body.removeChild(del);}
      //删除上一个 end
      const iframe = document.createElement('IFRAME');
      let doc = null;
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
      iframe.id = 'iframe'
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      //添加样式 start
      // doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">'); 此方法单页面无效,心态炸了,直接写js导出css字符串解决
      //参考源码导出css加载到iframe中
      doc.write(`<style>${printCss}</style>`);
      //添加样式 end
      doc.write(el.innerHTML);
      doc.close();
      // 获取iframe的焦点,从iframe开始打印
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf("MSIE") > 0){ document.body.removeChild(iframe); }
    },
    

    表单选中失效:

    //因为cheched属性赋值为true在打印中会失效,不支持动态赋值,出此下策解决
    <input type="checkbox" class="mr5" disabled checked v-if='isChecked' :checked='isChecked'> 
    <input type="checkbox" class="mr5" disabled v-else> 
    

    样式失效:

    import printCss from './printCss.js' //iframe打印使用
    import '../../assets/css/print.css' //项目内预览使用
    // doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">'); 此方法单页面无效,心态炸了,直接写js导出css字符串解决
    //参考源码导出css加载到iframe中
    doc.write(`<style>${printCss}</style>`);
    

    分页问题:

    //.paging{page-break-after: always;} /*分页符 针对打印html时使用*/
    <div class='paging'>
    	paging类名为分页符,此功能必须嵌套内容才会生效。
    </div>
    

    背景色不显示问题:

    div{
    	background:#000;
    	-webkit-print-color-adjust:exact;
    	-moz-print-color-adjust:exact;
    	-ms-print-color-adjust:exact;
    	print-color-adjust:exact;
    }
    

    图片不显示问题:
    项目内的得图片,在打印预览中会失效,需要将图片换成网络图片(https || http)才行。

    游戏篇:
    微信几百个人中第一个上王者,70%胜率,真是遇神杀神,遇魔诛魔。
    最近一手李信,开局带疾走,就被喷,
    我直接:你在教我做事?
    毕竟年少轻狂,后来自己坑了,被喷得体无完肤,
    队友:我就说这李信带疾走一看就是坑b!
    我:。。。。
    一时间,竟无力反驳。整得现在我李信都不敢带疾走了,信不自信也,只要我带闪现就没人喷得了我,闪现保平安。

    展开全文
  • 解决方法:首先选择所有要打印的文件,这里可以是word、excel、powerpoint文件然后在所选择的文件上,点击右键出来的菜单选择“打印” ,就会一次性打印选择的所有文件。注意事项这种方式,可以一次性打印选择...
  • 针式打印机的页面打印设置小技巧解析针式打印机受进纸方式制约,进纸时,都要卷入一小段,固定纸张,这一小段是无法用“页面设置”设置的。同样,打印完后,下边距也要留一小段,同样也无法用“页面设置”设置。即使...
  • ArcGIS地图打印

    千次阅读 2022-04-04 22:56:16
    个人学习笔记,仅供学习交流。 参考书籍:《ArcGIS从0到1》 ...  在主菜单【文件】下拉菜单下,选择页面打印设置】可以更改打印方式。 插入Excel的方法   打开excel文档,选择需要打印的表格数据—.
  • 页面调用Adobe Reader自带的控件实现pdf打印

    万次阅读 热门讨论 2017-11-24 14:58:00
     但是,有的场景会考虑到pdf文件的敏感,需要pdf文件不能被下载,只能打印且只能打印一次,这就需要考虑使用控件了。   2、Adobe Reader    Adobe Reader是一款优秀的PDF文档阅读软件。你可以使用Adobe ...
  • 打印

    千次阅读 2020-10-23 09:15:00
    在这章中,我们将会着手用于打印文件和控制打印选项的命令行工具。通常不同发行版的打印配置各有不同且都会在其安装时自动完成,因此这里我们不讨论打印的配置过程。本章的练习需要一台正确配置的打印机来完成。 ...
  • C-Lodop打印页面

    千次阅读 2017-09-21 14:43:00
    基于MVC4+EasyUI的Web开发框架经验总结(16)--使用云打印控件C-Lodop打印页面或套打报关运单信息 在最新的MVC4+EasyUI的Web开发框架里面,我整合了关于网购运单处理的一个模块,其中整合了客户导单、运单合并、...
  • js网页打印的4种方式和相关内容

    千次阅读 2020-03-27 15:11:06
    js打印的4种方式和相关内容前言注释方式打印id选择打印 前言 在网页上打印通常都是Ctrl+p,例如百度首页打印预览: 我们有时候在项目中也会使用打印的功能,基本上都是打印网页上的一部分内容,比如某块区域的文章...
  • 打印东西怎么打印出来

    千次阅读 2021-06-23 08:11:44
    快速导读:Q1:怎么查看打印机的打印记录...3、进入到属性对话框,切换到“端口”页面选择“配置端口”选项进行点击操作。4、然后在弹出的对话框中IP地址区域,复制该ip地址。5、然后在电脑上打开一个浏览器,将复...
  • 1、打印预览空白,网页打印空白原因及解决办法汇总故障表现:1. 网页没有加密过,word 什么的打印预览正常。进行网页打印,预览时是空白的,只出现页码和在最下面本该显示该网站域名的地方出现 file:/C:WINDOWSTEMPd7...
  • 打印,那些你没有注意的小细节

    千次阅读 2020-12-29 10:48:50
    顺序还是逆序对于不少家庭用户来说,在打印多页文件时,都会发现一个很纠结的事情,打印出来的稿件页序是反的,最后一页在最上面,而第一页在最下面,每次打印完毕后,还得手动整理一下页序才能阅读或装订,这要是几...
  • 电脑打印机无法打印怎么办?前面介绍过因为打印机服务没有启动所打印机无法正常的打印了,下面我们再来看一篇在打印机不能打印问题原因及解决办法。第一、确认打印机安装是否正常本地打印机无法使用,首先从先易后难...
  • 现在用手机可以非常方便地将手机的任意页面(禁止截图的App页面除外)用截长屏的方式一次将常常的页面内容截图下来,这些长页面通常是通常是聊天记录或各种文章等。 截图下来后,在手机或电脑中查看倒是不会有...
  • lodop页面直接打印 水印 分页 套打

    万次阅读 2014-08-16 12:04:29
    lodop取意自“load or print”,是一款优秀的Web打印控件,在开发中,传统打印控件总是“页面是什么就只能打印什么”,缺乏灵活,使打印略显呆板。而使用lodop则可以做到“只看想看的、打印想打的”,不仅开发人员...
  • 原文地址:http://android.xsoftlab.net/training/printing/custom-docs.html对于一些应用,比如绘图类APP,版面设计类APP以及其它APP,这些APP都关注图形的输出,有一个漂亮的打印页面是它们的关键特性。...
  • 打印机只打印一页却重复不停打印的原因之一和解决方法腾讯视频/爱奇艺/...出现这一问题的原因有多个,但可能比较大的原因,是“双向打印”功能不兼容,解决方法如下。2.第一步,直接在打印机上关闭打印。点击打...
  • 不过在实际打印材料的过程中,一旦需要打印的材料内容非常多的时候,我们就会感觉到手工双面打印方法操作起来有一定的难度,例如经常容易出现正反页面内容的页码没有连续显示或者容易出现卡纸现象。为了有效避免这些...
  • 解决报表打印各类问题集锦

    千次阅读 2021-03-16 01:13:28
    很多人在使用FineReport报表软件处理数据展现问题时,往往需要输出、打印,此集锦详细介绍了如何使用各种打印方式的步骤,以及遇到问题的解决方法。目录多种报表打印方式简介…………………………………………………...
  • 如何在电脑wps软件内设置双面打印

    千次阅读 2021-07-25 05:57:06
    如何在电脑wps软件内设置双面打印腾讯视频/爱奇艺/优酷/外卖 充值4折起当我们在使用电脑的时候,可以使用wps软件内进行文档的编辑操作,那么文档编辑结束后需要对其进行打印的话,应如何设置双面打印呢?接下来就由...
  • 在实际的开发过程中,浏览器本身自带的打印操作默认打印整个可视界面,但是往往不能满足实际项目需要,打印页面指定内容的功能在OA系统中更加常见。网络上有很多的方法实现,本人结合自身实际体会,绝大多数的方法...
  • C# 八种方案打印PDF文档

    万次阅读 2017-11-02 21:20:12
    打印PDF文档是开发人员经久不变的话题,常见的打印需求大致有以下八种: 用默认打印机打印PDF文档 用虚拟打印机打印PDF文档 指定打印机及PDF文档的打印页码范围 静默打印PDF文档 双面打印PDF文档 打印PDF文档的多页...
  • win7局域网连接打印机显示本地打印后台处理程序服务没有运行win7局域网连接打印机显示本地打印后台处理程序服务没有运行 连接打印机的电脑是xp系统,打印机型号:hp laser jet 1010,开启网络共享,在局域网里用win7...
  • 选择【设备类型】页面(在该页面上有四个按钮:【设备类型】、【打印控制】、【格式类型】、【页格式】);2、选择【页格式】进入页格式列表界面,选择工具栏上的【修改】图标,工具栏左边会出现【新建】图标(注:不点...
  • 打印日志是一门艺术,但长期被开发同学所忽视。日志就像车辆保险,没人愿意为保险付钱,但是一旦出了问题都又想有保险可用。我们打印日志的时候都很随意,可是用的时候会吐槽各种 SB 包括自己!写好每一条日志吧,与...
  • 很多从事CAD设计工作的用户都碰到过这种情况:在一个单DWG格式的图纸文件中包含有大量图纸,如果一张一张...Batchplot批量打印教程1、打开需要进行批量打印的DWG多图纸文件,点击【CAD菜单栏】—【文件】—【页面设...
  • 惠普打印机怎样打印测试页

    千次阅读 2020-12-22 12:11:59
    展开全部答:1.打开电脑找到进入系统-控制面板--设备和打印机。2.进入后找已安...扩展资料:打印机(Printer) 是计算机的输出设备之一,用于将计算机处理结果打印在相关介质上。衡量打印机好坏的指标有三项:...
  • 最近做一个简单的打印功能,要使用JavaScript调用浏览器的打印功能。并设置打印为横向打印: ... }为了在页面做一个打印的按钮,但是在真实打印的时候该按钮又不能显示在打印页面上,这里我加了两个标识的注释 <!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 113,934
精华内容 45,573
关键字:

怎么选择性打印页面