您的位置：首页 > 编程技术 > html  >  html web打印小结

html web打印小结

 更新时间：2017年1月22日 11:06  点击：1627
小编推荐的这篇文章介绍了html web的打印小结，有需要的同学快看看吧！

项目中有个需求是将winform客户端的打印，移到网页上由客户自行打印，打印要求是根据一定的格式实现套打。

当时的解决方案是使用PDF打印：

1、 准备好套打格式的底图；

2、打开底图，将动态内容画到底图上；

3、利用第二步修改后的图片，生成PDF，完成打印

后来发现一款比较强大的web打印工具lodop,简单使用说明如下：

1、先检查下浏览器是否安装此插件：

   http://www.lodop.net/demolist/PrintSample1.html

2、建立html，此入口可以打开一个图形化编辑页面，生成结果图如下：

 

 代码如下 复制代码

<html>

<body>

<objectid="LODOP"classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA"width=0height=0></object>

<script>

function myPreview() {

 LODOP.PRINT_INIT("测试套打模板");

 };

</script>

<ahref="javascript:;"onclick="javascript:myPreview();LODOP.PRINT_DESIGN();">进入模板设计</a>

</body>

</html>

 

3、我们可以将要套打的单据做成图片，导入这个图形化界面作为背景图，然后放入文本框等内容，开始测试。

4、完成位置定位后，可以点击左上角的整体对准图标，做统一调整。

5、去掉背景图，生成代码，放入JS代码段中

 

 代码如下 复制代码

LODOP.PRINT_INIT("测试套打模板");

LODOP.ADD_PRINT_TEXT(107,225,338,30,"竞买人名称");

LODOP.SET_PRINT_STYLEA(0,"FontSize",15);

LODOP.ADD_PRINT_TEXT(421,116,209,26,"手机号码");

LODOP.SET_PRINT_STYLEA(0,"FontSize",13);

<html>

<body>

<objectid="LODOP"classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA"width=0height=0></object>

<script>

function myPreview() {

 LODOP.PRINT_INIT("测试套打模板");

LODOP.ADD_PRINT_TEXT(107,225,338,30,"竞买人名称");

LODOP.SET_PRINT_STYLEA(0,"FontSize",15);

LODOP.ADD_PRINT_TEXT(421,116,209,26,"手机号码");

LODOP.SET_PRINT_STYLEA(0,"FontSize",13);

 };

</script>

<ahref="javascript:;"onclick="javascript:myPreview();LODOP.PRINT_DESIGN();">进入模板设计</a>

</body>

</html>

 

6、JS参数性质的改动

总结：

PDF的难点在于要精确的计算出需要填充内容的位置，调试比较麻烦，而lodop是图形化界面，方便我们调试，并且语法简单，方便溶于ＪＳ中，此处仅仅简单列举了一个简单的实例，更多功能，可参考官网地址：http://www.lodop.net

这篇文章介绍了利用iscroll4实现轮播图效果实例代码，有兴趣的同学可以参考一下

iscroll之所以会诞生，主要是因为无论是在以前的iphone、ipod、android  或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效；

一、html代码,当然可以动态添加下面的小圆点

 

  

   

  • 1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.

   

  • 2. A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.

   

  • 3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.

   

  • 4Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.

  

 

 li.active').className = ''

    document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'

   },

   onBeforeScrollStart:function(){

    clearInterval(timer);

    },

   onTouchEnd:function(){

    timer=setInterval(gund,2000);

    i=myScroll.currPageX

    },

   });

 

 timer=setInterval(gund,2000);

 function gund(){ //每5秒滚动

   i++;

    

   if(i==oli_l){

    i=0;

    myScroll.scrollToPage(0, 0, 1000); //滚回第一页

   } else {

    myScroll.scrollToPage('next', 0);

   };

   document.title=i

  };

  

};

document.addEventListener('DOMContentLoaded', loaded, false);

html  和css不用说，都是行家，主要是js，首先是初始化，再根据iscorll提供的API修改相应的代码，这里主要用刀onBeforeScrollStart，onScrollEnd，onTouchEnd这三个事件，同时结合scrollToPage（），currPageX事件进行对应的定时修改，滑动之后同步自动滚动的页数，就ok了，其实写这个主要是熟悉API。。。

小编推荐的这篇文章介绍了VUE JS使用组件实现双向绑定的示例代码，有需要的同学快看看吧！

1.VUE 前端简单介绍

VUE JS是一个简洁的双向数据绑定框架，他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同，他在初始化时对数据增加了get和set方法，在数据set时，在数据属性上添加监控，这样数据发生改变时，就会触发他上面的watcher，而ANGULARJS 是使用脏数据检查来实现的。

另外VUEJS 入门比ANGULARJS 简单，中文文档也很齐全。

2.组件实现

在使用vue开发过程中，我们会需要扩展一些组件，在表单中使用，比如一个用户选择器。

在VUEJS 封装时，可以使用组件和指令。

在VUEJS中有V-MODEL 这个感觉和ANGULARJS 类似，实际完全不同，没有ANGULARJS 复杂，他没有象ANGULARJS的 ng-model 的viewtomodel和modeltoview特性，而且这个v-model 只能在input checkbox select 等控件上进行使用，而 angularjs 可以 扩展 ngmodel实现他的render方法。。

另外我在使用 VUE指令时，实现双向绑定，这个我研究了自定义指定的写法，可能还是不太熟悉的原因，还没有实现。

我改用组件来实现：


Vue.component('inputText', {

      props: {

        'input':{

         required:true

      },pname: {

        required:true

      }},

      template:'<div><input type="text" v-model.lazy="input[pname]"><button @click="init" >选择</button></div>',

      data:function() {

        return{

         myModel:"ray"

        }

      },

       

      methods: {

       init:function() {

         varrtn=prompt("输入数据!","");

         this.input[this.pname]=rtn;

        }

      }

     })

在vue实现组件时，他使用的是单向数据流，在这里我们使用 对象来实现双向绑定。

在上面的代码中，有两个属性 ：

input，pname 其中input 是一个数据对象实例，pname: 只是一个字符串。

模版代码：

<script type="x-template"id="myTemplate">

    <div >

      <table border="1"width="400">

         <tr>

           <td>name</td>

           <td>

             <input-text :input="person"pname="name"></input-text>

           </td>

         </tr>

         <tr>

           <td>age</td>

           <td>

             <input v-model="person.age">

           </td>

         </tr>

          

       </table>

       <table border="1"width="400">

         <tr>

           <td colspan="3">

             <a href="#"@click="addRow('items')"class="btn btn-primary">添加</a>

           </td>

         </tr>

          

         <tr v-for="(item, index) in person.items">

           <td >

             <input-text :input="item"pname="school"></input-text>

           </td>

           <td >

             <input-text :input="item"pname="year"></input-text>

           </td>

           <td >

             <a @click="removeRow('items',index)">删除</a>

           </td>

         </tr>

          

        

       </table>

   {{person}}

    </div>

  </script>

<inputtext :input="item"pname="school"></inputtext>

 

<inputtext :input="person"pname="name"></inputtext>

组件使用代码，这里绑定了 item,person 数据，pname 为绑定字段。

JS实现代码：

varapp8 =newVue({

     template:"#myTemplate",

     data:{

       person:{name:"",age:0,

        items:[]

       }

     }

     ,

     methods: {

       addRow:function(name) {

        this.person[name].push({school:"",year:""})

       },

       removeRow:function(name,i){

         this.person[name].splice(i,1) ;

       }

      }

      

    })

    app8.$mount('#app8')

这里我们实现了 子表的数据添加和删除。

界面效果：

[!--infotagslink--]

相关文章

  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • C#使用Http Post方式传递Json数据字符串调用Web Service

    这篇文章主要为大家详细介绍了C#使用Http Post方式传递Json数据字符串调用Web Service，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • InterlliJ IDEA2020新建java web项目找不到Static Web的解决

    这篇文章主要介绍了InterlliJ IDEA2020新建java web项目找不到Static Web的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-02

  • IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值，重现代码如下 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </head> <body style="height:3...2014-06-07

  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-11

  • jQuery mobile 移动web(6)

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21

  • c# 获取已安装的打印机并调用打印文件

    这篇文章主要介绍了c#如何获取已安装的打印机并调用打印文件，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2020-12-08

  • vue实现页面打印自动分页的两种方法

    这篇文章主要为大家详细介绍了vue实现页面打印自动分页的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-29

  • XML、HTML、CSS与JS的区别整理

    在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21

  • Angular.js中下拉框实现渲染html的方法

    这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。...2017-06-24

  • Springboot+MDC+traceId日志中打印唯一traceId

    本文主要介绍了Springboot+MDC+traceId日志中打印唯一traceId，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-17

  • angularjs中ng-bind-html的用法总结

    这篇文章主要介绍了angularjs中ng-bind-html的用法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-05-27

  • jQuery UI结合Ajax创建可定制的Web界面

    这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面，如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI，感兴趣的小伙伴们可以参考一下...2016-06-24

  • Tomcat首次部署web项目流程图解

    这篇文章主要介绍了Tomcat首次部署web项目流程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-11

  • Microsoft Expression Web 简体中文正式版 官方下载地址

    Microsoft Expression Web 简体中文正式版相对于早期的 Microsoft Expression Web Designer CTP1(英文)除了它是正式的中文版外，有进步的地方1.对标签的id名称加上了css的代...2020-06-25

  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容，实用性非常，感兴趣的朋友参考下吧...2016-05-06

  • C#操作excel打印的示例

    这篇文章主要介绍了C#操作excel打印的示例，帮助大家利用c#打印表格，提高办公效率，感兴趣的朋友可以了解下...2020-12-08

  • C#使用正则表达式过滤html标签

    最近在开发一个项目，其中有需求要求我们把一段html转换为一般文本返回，使用正则表达式是明智的选择，下面小编给介绍下C#使用正则表达式过滤html标签，需要的朋友参考下...2020-06-25