复杂表格生成 缴款单 打印

最新推荐文章于 2024-01-31 16:41:55 发布
最新推荐文章于 2024-01-31 16:41:55 发布
阅读量424 收藏
点赞数
文章标签： HTML  table 打印 angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suo172/article/details/89401209
版权

##html 复杂表格生成 缴款单 打印机打印

效果展示:

打印主要是第三方essence-ng2-print
参考地址:https://www.npmjs.com/package/essence-ng2-print

关于打印还有一个回调的问题: printComplete 打印或者取消都会走这个方法, 并不是文档所说的打印完成的事件 ,查找了资料说是无法控制打印机, 添加了用户操作让用户确认是否已经打印成功.(如果方法控制判断, 欢迎指正)

核心代码:
<div style=“background: white;height: 576px;width: 911px;padding: 10px” #print>




  <div style="text-align: center;font-size: 26px;font-weight: bold">
    <div>
      <label>中&nbsp;华&nbsp;人&nbsp;民&nbsp;共&nbsp;和&nbsp;国</label>
    </div>
    <div class="top-title">
      <label style="border-width: 0px 0px 5px 0px;border-color: #919191;border-style: solid;padding: 5px">
        税收缴款书(税务收现专用)
      </label>
    </div>
  </div>
  <div>
    <label style="float: right; margin-right: 64px;font-size: 12px">(171)皖国现</label>
  </div>
</div>


<div>
  <div style="font-weight: bold;  font-size: 12px;  width: 794px; margin: auto; padding-top: 30px">
    <label>登记注册类型：</label><label style="margin-right: 135px">内资个人</label>
    <label>增发日期：</label><label style="margin-right: 135px">2019年04月15日</label>
    <label>税务机关：</label><label>机关</label>
  </div>

  <table style="border: 1px solid #666666;width: 794px;height: 416px;border-collapse:collapse;margin: auto">
    <tr height="50px">
      <td colspan="8" >
        <table style="width: 100%;height: 50px;border: 0px;border-collapse:collapse">
          <tr>
            <td class="td-text" style="width:116px;border-width: 0px 1px 0px 0px">纳税人识别号</td>
            <td class="td-blue" colspan="2" style="border-width: 0px 0px 0px 0px">{{datas.applyCard}}</td>
            <td class="td-text" style="width:116px;border-width: 0px 1px 0px 1px">纳税人名称</td>
            <td class="td-blue" colspan="2" style="border-width: 0px 0px 0px 0px">{{datas.applyPerson}}</td>
          </tr>
          <tr>
            <td class="td-text" style="width:116px;border-width: 1px 1px 0px 0px">地址</td>
            <td colspan="5" style="border-width: 1px 0px 0px 0px"></td>
          </tr>
        </table>
      </td>
    </tr>

    <tr >
      <td colspan="8" style="height: 264px;">
        <table style="width: 100%;height: 262px;border: 0px;border-collapse:collapse;display: block">
          <!--<thead >-->
          <tr style="height: 25px">
            <td class="td-text" style="width: 70px;border-width: 0px 1px 1px 0px">税种</td>
            <td class="td-text" style="width: 176px;border-width: 0px 1px 1px 0px">品目名称</td>
            <td class="td-text" style="width:62px;border-width: 0px 1px 1px 0px">课税数量</td>
            <td class="td-text" style="width:88px;border-width: 0px 1px 1px 0px">计税金额或销售收入</td>
            <td class="td-text" style="width: 70px;border-width: 0px 1px 1px 0px">税率或单位税额</td>
            <td class="td-text" style="width: 176px;border-width: 0px 1px 1px 0px">税款所属时期</td>
            <td class="td-text" style="width: 62px;border-width: 0px 1px 1px 0px">已缴或扣除额</td>
            <td class="td-text" style="width: 88px;border-width: 0px 0px 1px 0px">实缴金额</td>
          </tr>

          <!--</thead>-->
          <tbody style="height: 239px">

          <tr >
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
          </tr>
          <tr>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
          </tr>
          <tr>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
          </tr>
          <tr style="height: 25px">
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
            <td class="no-border-td">111</td>
          </tr>
          <tr *ngFor="let item of datas.list" style="height: 25px">
            <td class="no-border-td">{{item.zsxmDm}}</td>
            <td class="no-border-td">{{item.zspmDm}}</td>
            <td class="no-border-td">{{item.num}}</td>
            <td class="no-border-td">{{item.jsyj}}</td>
            <td class="no-border-td">{{item.sfl}}</td>
            <td class="no-border-td">{{item.skssqz}}至{{item.skssqz}}</td>
            <td class="no-border-td">{{item.yjse}}</td>
            <td class="no-border-td">{{item.ybse}}</td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>

    <tr style="height: 25px">
      <td class="td-text" style="width: 92px;">合计金额</td>
      <td colspan="6" class="td-blue">(大写){{datas.totalAmountChinese}}</td>
      <td class="td-blue" style="width: 87px">￥{{datas.totalAmount}}</td>
    </tr>

    <tr style="height: 77px;">

      <td colspan="8">
        <table style="width: 100%;height: 100%;border: 0px;border-collapse:collapse">
          <tr>
            <td class="td-text" style="width:130px;border-width: 0px 1px 0px 0px">税务机关 <br/>(盖章)</td>
            <td class="td-text" style="width:130px;border-width: 0px 1px 0px 0px">税务机关 <br/>(盖章)</td>
            <td class="td-text" style="width:130px;border-width: 0px 1px 0px 0px">填票人 <br/>
              <label class="td-blue">{{datas.name}}</label>
            </td>
            <td class="td-text" colspan="3"
                style="text-align:left;border-width: 0px;vertical-align: top;padding: 10px">
              <label style="float: left;align-items: flex-start">
                备注
              </label>
              <br/>
              <label class="td-blue">(盖章)</label></td>
          </tr>
        </table>

      </td>

    </tr>
  </table>
</div>
</div>
suo172
关注
打印农行缴款单.htm
03-08
纯javascript技术打印农行缴款单,也可以自行修改成其它打印模式。欢迎交流打印心得！
SpringMVC结合POI复杂报表打印
qq_29606255的博客
07-28 758
SpringMVC结合POI复杂报表打印 有模板的复杂报表打印类和无模板的复杂报表打印类 一些POI打印的工具类
html 复杂表格
weixin_30699955的博客
08-02 296
123456789 123456789 0000000000 日期 123456789 1234560000000789 ----------- ----------- ----------- ----------- ----------- <table border="1" cellspacing="0" cell...
缴款单打印助手
03-29
针对银行的缴款单打印程序 很实用方便 vba开发的
angular中使用essence-ng2-print插件实现打印功能
yw00yw的博客
07-03 3549
在使用angular7做项目的时候，有个需求就是实现打印。百度搜索了一下，可以看到在angular中实现打印功能可以使用essence-ng2-print插件。网上也可以搜到其他的博客，但是真正用的时候发现还是不会用。 在经过摸索和请教大佬之后，经过尝试才实现了打印的初步功能。 正确使用： 1、安装 npm install --save essence-ng2-print 2、配置 在需要打印功能...
易语言现金缴款单打印
07-19
易语言现金缴款单打印源码,现金缴款单打印,系统退出,单笔金额计算,总金额计算,票面金额动态计算,票面张数金额清空,打印页面清空,数据保存,票面获得基本信息,获得单独金额,套打单据,写配置项目,读配置项目,基本信息,...
现金缴款单打印易语言源码-易语言
06-13
【描述】"现金缴款单打印易语言源码"表明这是一个专用于生成和打印现金缴款单的应用程序，使用易语言作为编程语言编写。在财务工作中，现金缴款单是记录公司或个人向银行或其他金融机构存款的重要凭证，通常包含缴款...
易语言源码现金缴款单打印易语言源码.rar
02-22
易语言源码现金缴款单打印易语言源码.rar 易语言源码现金缴款单打印易语言源码.rar 易语言源码现金缴款单打印易语言源码.rar 易语言源码现金缴款单打印易语言源码.rar 易语言源码现金缴款单打印易语言源码.rar ...
现金缴款单打印易语言源码
06-03
通过易语言实现现金缴款单的打印源码，我们可以理解为一个专门用于生成并打印此类单据的程序模块。 首先，我们需要了解现金缴款单的基本结构和内容，通常包括：企业名称、缴款日期、缴款人信息、缴款金额、收款银行...
angular2 表格打印 -essence-ng2-print插件
小武的博客
02-18 2350
1. 先下载essence-ng2-print到node_modules中      npm install --save essence-ng2-print 2. 在要用的模块的module中引入该插件     import { EssenceNg2PrintModule } from "essence-ng2-print"; @NgModule({ imports: ...
angular打印
最新发布
weixin_42015997的博客
01-31 352
在本周的项目中遇到一个需求，打印页面的某些内容，本以为是个很简单的需求，毕竟浏览器自带的就有打印功能，那不就成了调用一个函数的事情了吗？ 没那么简单 在开始向邢彦年学长明确需求的时候，邢彦年学长热心的提供了一个angular的插件—— essence-ng2-print，看了看使用方法确实简单，而且好像也是符合我的需求的，但第二天用的时候，才发现仅仅是好像而已，该插件在打印原生html项...
用html写消费记录页面,收支明细查询.html
weixin_42620913的博客
06-03 1395
收支明细查询$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
Python 实现批量生成 Word 文档：市民水电费缴费通知单
三二班_周同学
07-14 4568
介绍一个用 Python docx和xlrd模块，对已有的Word模板与需求，对模板文件进行修改，然后批量生成多个Word文档的实例。
angular2（准确说是typescript）打印调试信息到控制台
ypy9323的博客
01-12 7095
typescript 同样用console.log()来向控制台打印字符串信息,不过由于这种语言特性，输出属性值的语法不能使用“+”运算符， 它与c#语法更相似。 正确的方法是将字符串置于反单引号（字符1左边那个按键）里，属性值置于${} 中。怎么说也不如举个例子（^^）: console.log(`contact by edited id is ${this.contact_id
react 前端实现打印发票/图片
欢迎光临本仓鼠的地盘～
03-01 1947
项目场景： 电商后台管理系统，有一个功能要在web端生成发票、发货单（图片），并支持打印。客户是澳洲人，只考虑Chrome即可。 解决方案： 由于原型中发票的样式有一丢丢复杂，所以我们采用后端提供数据，前端编排打印模板的方案来实现。前端采用浏览器默认的打印方法window.print() // 点击打印按钮 handlePrint = async () => { const { data } = await printtaxinvoice({ id:this.props.
海关进口增值税缴款书稽核系统操作详解
该文档是关于“03海关进口增值税缴款书稽核系统v63操作手册”的第三部分，主要介绍了缴款书稽核功能的详细操作和业务流程，适用于省局和总局两个层级。 正文: 海关进口增值税缴款书稽核系统v63是一个专门用于稽核...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值