精华内容
下载资源
问答
  • 2018-12-14 13:42:37

    npm install vue-print-nb --save
    1、安装
    npm install vue-print-nb --save
    2、在 main.js文件中引入

    import Print from 'vue-print-nb'
    Vue.use(Print);  //注册
    

    3、打印整个页面

    <button v-print>打印整个页面</button>
    

    4、打印指定区域

    <div id="printContent" >打印内容</div>
    <button v-print="'#printContent'">打印</button>
    

    https://www.npmjs.com/package/vue-print-nb

    更多相关内容
  • vue 使用print-js 打印html页面

    万次阅读 热门讨论 2020-07-24 18:32:46
    打印html页时可以继承原有页面的样式,局部打印,过滤掉要打印的元素,及其方便。 一、vue安装命令: npm install print-js --save 二、引入 这个引入不需要在main.js中,直接在使用的.vue中引入即可 这里颜色虽然...

    Print.js 官网

    官网
    优点:可以打印多种格式的内容(pdf、json、html等)
    打印json时可以添加表头。打印html页时可以继承原有页面的样式,局部打印,过滤掉要打印的元素,及其方便。

    一、vue安装命令:

    npm install print-js --save

    二、引入

    这个引入不需要在main.js中,直接在使用的.vue中引入即可

    在这里插入图片描述

    这里颜色虽然是灰色,但是也要添加,否则会报错。

    三、编码

    我这里要打印 html 中的div ,调用函数找到 div 的 id。
    

    在这里插入图片描述

    methods: {
    		goPrint(){
                    console.log('打印')
                    printJS({
                        printable: 'printCons',
                        type: 'html',
                        //properties: [
                        //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                        //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                        //],
                        // header: `<p class="custom-p"> 名单 </p>`,
                        // style: '#printCons {width: 600px;} .no-print{width: 0px} .itemText1 { width: 200px } .itemText2 { width: 200px } .itemText3 { width: 200px } .itemText4 { width: 200px }',
                        // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                        // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                        // repeatTableHeader: true,
                        // scanStyles:true,
                        targetStyles: ['*'],
                        ignoreElements:['no-print','bc','gb']
                    })
                }
            }
    

    printable:要打印的id。
    type:可以是 html 、pdf、 json 等。
    properties:是打印json时所需要的数据属性。
    gridHeaderStyle和gridStyle都是打印json时可选的样式。
    repeatTableHeader:在打印JSON数据时使用。设置为时false,数据表标题将仅在第一页显示。
    scanStyles:设置为false时,库将不处理应用于正在打印的html的样式。使用css参数时很有用。
    targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
    style:传入自定义样式的字符串,使用在要打印的html页面 也就是纸上的样子。
    ignoreElements:传入要打印的div中的子元素id,使其不打印。非常好用

    展开全文
  • 关键字LODOP(露肚皮) ...下载地址:http://www.lodop.net/download.html进入之后下载lodop综合版 <h3>LODOP控件使用</h3> <p>请安装CLodop_Setup_for_Win32NT.exe控件</p&g...

    关键字LODOP(露肚皮)

    使用说明:

    1、加载LodopFuncs.js

    2、安装C-Lodop (Print)控件

    下载地址:http://www.lodop.net/download.html进入之后下载lodop综合版

    <h3>LODOP控件使用</h3>
    <p>请安装CLodop_Setup_for_Win32NT.exe控件</p>
    <div id="iTable">
        <table border="1" width="300" >
            <tr>
                       <td width="50%">1</td>
                          <td width="50%" class="hiddentd">1</td>
                </tr>
               <tr>
                          <td width="50%">2</td>
                          <td width="50%" class="hiddentd">2</td>
               </tr>
               <tr>
                         <td width="50%">3</td>
                         <td width="50%" class="hiddentd">3</td>
               </tr>
               <tr>
                         <td width="50%">4</td>
                         <td width="50%" class="hiddentd">4</td>
               </tr>
        </table> </div>
        <button οnclick="preViewPrint()">打印预览</button>
        <button οnclick="immediatelyPrint()">直接打印</button>
        <script language="javascript" type="text/javascript"> 
            var LODOP; 
              function preViewPrint(){
                    CreatePrintPage();
                    LODOP.PREVIEW();
              }
             function immediatelyPrint(){
                    CreatePrintPage();
                    LODOP.PRINT();
              }
             function CreatePrintPage() {
                    LODOP=getLodop(); 
                    var printHtml = "<body>"+document.getElementById("iTable").innerHTML+"</body>";
                    LODOP.ADD_PRINT_HTM(88,50,300,200,printHtml);//ADD_PRINT_HTM
              }
    </script> 

    展开全文
  • 1.网页点击打印时,打印渲染的页面每一页的头部都要有公司logo;2.而且分页时不能让某一行的表格断开(必须在达到固定高度时让页面自动分页); @media screen { div.divHeader{ display:none; } div....

    【方法一】:

    1.网页点击打印时,打印渲染的页面每一页的头部都要有公司logo;
    2.而且分页时不能让某一行的表格断开(必须在达到固定高度时让页面自动分页);

    @media screen {
    		div.divHeader{
    			display:none;
    		}
    		  div.divFooter {
    		    display: none;
    		  }
    	}
    	@media print {
    			div.divHeader{
    				position:fixed;
    				top:0;
    			}
    		  div.divFooter {
    		    position: fixed;
    		    bottom: 0;
    		  }	
    	}
    
    <!--页眉  -->
    <div class="divHeader">页眉</div>
    
    <!--  页脚-->
    <div class="divFooter" >
    	页脚
    </div>

    【效果分析】:

    打印出来的页脚存在与word文件的最后一行,但并不是页脚的位置。(自我感觉作用不大)

    【方法二】:

    <script> 
    $(document).ready(function(){ 
    	function t(){ 
    		var e = $(".footer");//获取页脚div的对象 
    		var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值
    		//判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度 
    		if(h < document.body.clientHeight){ 
    			//当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了,当然这里也可以用绝对和相对属性 
    			//具体设置根据你实际情况来定吧 
    			$(".footer").css({position:"fixed",left:"3%",bottom:"0px"}); 
    			return; 
    		} 
    	function t2(){ 
    		var a = $(document).scrollTop()+document.documentElement.clientHeight-50;//获取页面滑动偏移量加页面可见区域的高度 
    		//判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度 
    		if(a >= h){ 
    			//如果页面内容太多,需要下滑展示的时候,给页脚一个固定定位属性 
    			$(".footer").css({position:"fixed",left:"3%",bottom:"0px"}); 
    		}else{ 
    			//当页面重新上滑页脚需要被隐藏的时候移除它的定位属性,这样不论何时,它肯定是被页面撑起来固定到底部展示的。 
    			$(".footer").removeAttr("style"); 
    		} 
    	} 
    	t2(); 
    	//在页面大小改变时触发方法t2 
    	$(document).resize(t2); 
    	//在页面滑动时触发方法t2 
    	$(document).scroll(t2); 
    } 
    //直接运行方法t 
    t(); 
    }); 
    $(document).ready(function(){ 
    	function t(){ 
    		var e = $(".header");//获取页眉div的对象 
    		var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值
    		//判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度 
    		if(h < document.body.clientHeight){ 
    			//当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了,当然这里也可以用绝对和相对属性 
    			//具体设置根据你实际情况来定吧 
    			$(".header").css({position:"fixed",right:"3%",top:"0px"}); 
    			return; 
    		} 
    	function t2(){ 
    		var a = $(document).scrollTop()+document.documentElement.clientHeight;//获取页面滑动偏移量加页面可见区域的高度 
    		//判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度 
    		if(a >= h){ 
    			//如果页面内容太多,需要下滑展示的时候,给页脚一个固定定位属性 
    			$(".header").css({position:"fixed",right:"3%",top:"0px"}); 
    		}else{ 
    			//当页面重新上滑页脚需要被隐藏的时候移除它的定位属性,这样不论何时,它肯定是被页面撑起来固定到底部展示的。 
    			$(".header").removeAttr("style"); 
    		} 
    	} 
    	t2(); 
    	//在页面大小改变时触发方法t2 
    	$(document).resize(t2); 
    	//在页面滑动时触发方法t2 
    	$(document).scroll(t2); 
    } 
    //直接运行方法t 
    t(); 
    }); 
    </script>
    
    
    <!--页眉  -->
    <div style='background:#ccc;' class="header"><span style="line-height: 30px;">合同编号:<%=contractCount.getContractId() %></span>
    </div>
    
    <!--  页脚-->
    <div class='footer'><span style="height: 20px;">
    <p align="center">我爱学习</p>
    <small >我们是进步的好青年</small><small style="margin-left: 530px;">哈哈哈哈哈哈哈哈哈哈</small>
    <small>Emila:cbuydfgcuadyrgf</small><small style="margin-left: 370px;">http://www.svdfvudhfguem</small></span></div>

    【效果分析】:

    会出现页眉页脚处与打印的内容重合。

    【资料】

    一、HTML页脚始终固定在底部

     

     

     

     

     

     

    展开全文
  • Js打印html页面

    千次阅读 2019-03-21 15:17:29
    https://blog.csdn.net/meiqi0538/article/details/81292390
  • 领导分配了一个任务,利用c#连接打印机,打印一个html页面,对于一个Java本专业还不太熟练的我,之前从未接触过c#,挑战还是很大的。但是没办法,做呗!!!首先找一个写c#的工具呗,所以下载了vs2015,实现方法如下...
  • jquery打印HTML表格自动分页

    热门讨论 2012-05-14 20:34:27
    采用JQuery实现的打印HTML表格自动按多少行分页,打印时分页
  • 如何在页面上调用打印机!!!要打印的内容:JSP上的一个&lt;DIV&gt;&lt;/DIV&...,打印按钮:打印按钮的方法:$(function(){   $('#checkin_div').click(function(){ $('#dvData')....
  • 如题,使用QT打印html,打印出来的html不是从纸张的左上角开始的,离左上的边距太大了,为什么有这样的问题,怎么办,跪求,先谢谢了,版本QT5.2.1
  • PHP输出PDF打印HTML5+CSS3打印格式控制

    千次阅读 2016-12-22 13:36:19
    寻找一个好的打印方法是各行各业迫切的需求,经过几番折腾,借道输出PDF,PHP抓取目标的HTML代码,然后输出到指定的解析器,再生成最终的打印格式,成为人们的终极选择。
  • js打印html页面中的指定内容?

    千次阅读 2017-12-20 17:09:02
    js打印html页面中的指定内容? 文章发布日期: 2017-12-20 文章更新日期:2018-01-08 添加demo下载 下载地址 传送门-&amp;amp;gt;点击去下载 声明,所有的打印页面都叫,index.html 使用table2...
  • 鄙人用一个自己写的html 页面 利用浏览器的打印功能 去生成pdf 一直会有多余的一页空白页生成,最后发现原因如标题所述: body元素自带8px 的margin外边距!!! body元素自带8px 的margin外边距!!! body元素...
  • 打印Html页面自动分页

    千次阅读 2018-04-27 16:40:43
    在想要分页的地方添加一行代码即可&...添加后用chrome浏览器用js代码调用打印function preview() { bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="&l...
  • QT调用打印机打印html网页及文件

    万次阅读 2015-11-07 11:07:30
    打印用到了 QPrinter, 所以要在.pro里加上 qtHaveModule(printsupport): QT += printsupport直接附上源码吧,当然也是根据网上一些前辈的经验代码和实际使用情况改进而来:#ifndef WIDGET_H #define WIDGET_
  • 比如支付宝的支付接口调用的动态生成的跳转页面,后台需要返回给前端打印跳转支付 &amp;lt;form name=&quot;punchout_form&quot; method=&quot;post&quot; action=&quot;...
  • Python之打印html 表格

    千次阅读 2013-04-10 09:41:20
    现要实现打印html格式的表格代码,利用Python对字符串str.format()格式化操作进行处理,在日常对CVS格式文件处理过程当中,经常会将CVS格式文件进行转换,在正式场合是程序读取CVS文件进行转换并输出到html格式的...
  • javascript打印html页面

    千次阅读 2018-05-16 17:57:41
    这里是要打印html内容 &lt;/div&gt;&lt;!--startprint--&gt; 这里是要打印html内容 &lt;!--endprint--&gt;二、JS打印页面部分/* * 打印页面 */ function printHTML(_this){ // ...
  • jQuery打印Html页面主动分页

    千次阅读 2013-08-13 11:05:02
    用到打印HTML页面,须要指定区域打印,应用jquery.PrintArea.js 插件 用法: ¥("div#printmain").printArea(); 但还是会打印DIV后面的内容,这里可以应用CSS把握打印分页 有时用CSS把握分页了但还是...
  • 使用QTextDocument 打印html的时候 总是会有默认的页码 怎么才能取消掉默认打印页码
  • html前台打印小票(免弹框)

    热门讨论 2010-10-14 11:55:45
    这是在网上找的一个打印的控件,还比较不错,可以指定打印机名称进行打印,并且不会像JS里面的window.print()会弹出选择打印机这个框,这一特点正好满足我的需求,现在上传上来供大家研究
  • 上代码: <p>这里的所有内容不打印</p> //<!--startprint-->标签上面的内容不打印 <!--startprint--> <...两个注释之间的区域是我们需要打印html内容,其他内...
  • printJs 打印HTML 去掉页眉页脚

    千次阅读 2020-10-22 17:26:14
    printJs 打印HTML 去掉页眉页脚 #直接上代码 const style = '@page {margin:0 10mm};' printJS({ // 设置打印区域id printable: "print_container", type: "html", targetStyles: ["*"], style, maxWidth: ...
  • lodop打印html页面手动分页

    千次阅读 2018-05-07 16:02:01
    可以在html中使用&lt;tr&gt; &lt;td style="page-break-after:always;"&gt; &amp;nbsp; &lt;/td&gt; &lt;/tr&gt;在需要分页的地方加入此语句可实现分页;ps :js中...
  • 用JS在html页面实现打印功能

    万次阅读 热门讨论 2018-12-10 09:48:17
    用JS在html页面实现打印功能打印方式一:打印方式二:打印方式三(此方式会重新打开一个浏览器窗口): 做项目时,有在网页实现全局和局部打印的需求,百度许久,现总结如下: 打印方式一: 1.首先在head里面加入...
  • HTML打印方法总结

    万次阅读 2016-06-03 09:34:43
    html调用浏览器的打印方法有很多种, 在此做一些总结积累
  • JS实现html页面打印

    千次阅读 2018-12-18 15:37:08
    首先,在html头部或尾部加入: &lt;script language="javascript"&gt; function preview(oper) { if (oper &lt; 10){ bdhtml=window.document.body.innerHTML;//获取当前页的html...
  • 但是打印预览时背景图片却显示不出来。 ![图片说明](https://img-ask.csdn.net/upload/201907/05/1562312329_646581.png) 打印机的背景图片的勾选项我也勾选了。不知道哪里出了问题,哪位大神有过类似的经验能帮我...
  • HTML打印实现每一页都有固定的头部

    千次阅读 2020-03-22 19:35:25
    找了一下午,没有找到可以直接拿来的例子…自己根据需求想了一个办法: 最终效果 实现思路 通过 position: fixed; top: 0; 属性将每一页的头部固定在页面上部,不过这个时候会出现一个问题...html lang="en">...
  • 因为项目需要,找了一个不错的打印页面导出为PDF或者Word的jQuery插件 使用起来也很简单 这里我使用到的jQuery版本为:jquery-1.4.4.min.js 插件版本:jquery.jqprint-0.3.js 这里我用一个简单的列子来实现打印一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 803,506
精华内容 321,402
关键字:

怎么打印html