前端如何实现一张电子发票页面

实现电子发票预览

最近需要在react项目中实现预览发票的功能，要求发票和新版税务局样式保持一致，为方便查看使用styled编写样式。其中项目明细栏是固定高度，项目较多时通过上下滑动滚动条查看。

这是实现效果：

代码部分：

import React from 'react'
import styled from 'styled-components'
const testData = {invoiceNumber: '491164463144661',purchaserName: '唐僧',purchaserCode: '8946461654647777',sellerName: '佛祖',sellerCode: '12313123141231231',projectList: [{projectName: '大师兄',models: 'GZ60F_100',unitPrice: '100',unit: '只',quantity: '1',amount: '100.00',rate: '0.03',Tax: '3.00',},{projectName: '二师兄',models: 'GZ60F_200',unitPrice: '100',unit: '只',quantity: '1',amount: '100.00',rate: '0.03',Tax: '3.00',},{projectName: '三师弟',models: 'GZ60F_300',unitPrice: '100',unit: '只',quantity: '1',amount: '100.00',rate: '0.03',Tax: '3.00',},],totalPriceNumber: 999.99,totalPriceString: '玖佰玖拾玖元玖角玖分',remark: '我是备注！！！',biller: '耶稣',
}
const InvoiceTmpDiv = styled.div`font-size: 12px;width: 1120px;.title {font-size: 26px;color: #b16363;text-align: center;line-height: 56px;padding-top: 0;}.extra {color: #b15b16;.content {color: #181818;}}.height84 {height: 110px;}.row {border: 2px solid #b16363;border-bottom: none;color: #b15b16;.content {color: #181818;}}.last-row {.content {color: #181818;}color: #b15b16;border-top: 2px solid #b16363;}.label {width: 78px;display: inline-block;text-align-last: justify;text-align: justify;}.longLabel {width: 178px;display: inline-block;text-align-last: justify;text-align: justify;}.title-label {width: 52px;}
`const Row = styled.div`.col_1 {width: 2.65%;borderleft: none;}.col_4 {width: 3.75%;}.col_9 {width: 7.4%;}.col_2 {width: 8.33%;}.col_3 {width: 12.5%;}.col_5 {width: 20.83%;}.col_6 {width: 42.5%;}.col_7 {width: 29.16%;}.col_8 {width: 33.33%;}.col_14 {width: 58.33%;}.col_15 {width: 42.5%;}.col_17 {width: 70.83%;}.col_18 {width: 100%;}.col_24 {width: 100%;}
`const Col = styled.span`display: inline-block;padding: 8px;box-sizing: border-box;vertical-align: middle;border-left: 2px solid #b16363;height: 100%;&.no-border {border-left: none;}.text-center {text-align: center;border-left: none;border-right: none;}&.transparent-border {border-left: 2px solid rgba(0, 0, 0, 0);}&.invoice-number {border-left: none;color: #b16363;padding: 0 0 0 800px;font-size: 14px;}
`
const UnderLine = styled.div`border: 2px solid #b16363;width: 325px;height: 8px;margin: -1% 0 2% 35%;border-left: none;border-right: none;
`
const InvoiceInfo = styled.span`color: black;
`
const TitleDescription = styled.div`margin-top: 4.2%;
`
const ProjectContainer = styled.div`width: 100%;height: 160px;border-top: 2px solid #b16363;border-right: 2px solid #b16363;border-left: 2px solid #b16363;overflow: auto;.single-project {width: 100%;height: 30px;}
`
export default function PreviewInvoices() {return (<div><InvoiceTmpDiv><Row><Col className="col_18 invoice-number">发票号码：<InvoiceInfo>{testData.invoiceNumber}</InvoiceInfo></Col><Col className="title col_18 no-border">电子发票（增值税专用发票）</Col><UnderLine className="UnderLine"><div></div></UnderLine></Row><Row className="row height84"><Col className="col_1 no-border">购买方信息</Col><Col className="col_15"><TitleDescription><span className="label">名称</span>：<span className="content">{testData.purchaserName}</span></TitleDescription><TitleDescription><span className="longLabel">统一社会信用代码/纳税人识别号</span>：<span className="content">{testData.purchaserCode}</span></TitleDescription></Col><Col className="col_1">销售方信息</Col><Col className="col_6"><TitleDescription><span className="label">名称</span>：<span className="content">{testData.sellerName}</span></TitleDescription><TitleDescription><span className="longLabel">统一社会信用代码/纳税人识别号</span>：<span className="content">{testData.sellerCode}</span></TitleDescription></Col></Row><Row className="row"><Col className="col_7 no-border"><div className="text-center">项目名称</div></Col><Col className="col_5"><div className="text-center">规格型号</div></Col><Col className=""><div className="text-center">单位</div></Col><Col className=""><div className="text-center">数量</div></Col><Col className="col_2"><div className="text-center">单价</div></Col><Col className="col_3"><div className="text-center">金额</div></Col><Col className=""><div className="text-center">税率/征收率</div></Col><Col className="col_2"><div className="text-center">税额</div></Col></Row><Row><ProjectContainer>{testData &&testData.projectList.map((item) => {const {Tax,amount,models,projectName,quantity,unitPrice,rate,unit,} = itemreturn (<div className="single-project"><Col className="col_7 transparent-border"><div className="text-center">{projectName}</div></Col><Col className="col_5 transparent-border"><div className="text-center">{models}</div></Col><Col className="col_4 transparent-border"><div className="text-center">{unit}</div></Col><Col className="col_4 transparent-border"><div className="text-center">{quantity}</div></Col><Col className="col_2 transparent-border"><div className="text-center">{unitPrice}</div></Col><Col className="col_3 transparent-border"><div className="text-center">{amount}</div></Col><Col className="col_9 transparent-border"><div className="text-center">{rate}</div></Col><Col className="col_2 transparent-border"><div className="text-center">{Tax}</div></Col></div>)})}</ProjectContainer></Row><Row className="row"><Col className="col_15 no-border">价税合计（大写）<InvoiceInfo>{testData.totalPriceString}</InvoiceInfo></Col><Col className="no-border">（小写）<InvoiceInfo>￥{testData.totalPriceNumber}</InvoiceInfo></Col></Row><Row className="row height84"><Col className="col_1 no-border">备注</Col><Col className="col_7"><InvoiceInfo>{testData.remark}</InvoiceInfo></Col></Row><Row className="last-row"><Col className="col_6 no-border">开票人：<InvoiceInfo>{testData.biller}</InvoiceInfo></Col></Row></InvoiceTmpDiv></div>)
}

前端如何实现一张电子发票页面相关推荐

ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生
2019独角兽企业重金招聘Python工程师标准>>> 6月27日京东商城发布了中国电子商务领域首张电子发票,同时宣布相关系统正式上线,这标志着中国电子商务的步伐又向前迈出了重要的一 ...
ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表)...
ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表) 原文: ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生( ...
2021-10-09 将多张电子发票pdf合并成一个pdf文件
最近打印电子发票时,由于公司打印机都是A4纸,打印一张发票用一张A4,太浪费了. 想到找一个合并多张发票打印在一张A4的小工具,网上找到的要么需要授权,要么到处弹广告. 作为程序员,那就自己弄一个吧. ...
多张电子发票合并为一张A4纸大小，以便打印，节约用纸。
在工作中经常收到许多电子发票,需要打印出来报销,每张发票都要单独占用一张A4纸,大部分的空白部分财务还会要求裁掉.很是浪费纸张. 为了解决这个问题,我写了一个小工具,可以把两张.三张发票合并到一张A4 ...
电子发票多页打印技巧(将四张不同发票打印在一页纸上)
随着电子发票的普及度越来越高,越来越多的商家开始提供电子发票开票服务.开票是简单了,但一般的企业报销时要是要求员工进行贴票报销,这样免不了要将发票打印出来.由于我目前工作的特殊性,在兼职这另外一家公司 ...
电子发票多页合并打印在一张纸上
背景平时打印发票时如果直接打印,会铺满一张A4,在贴票时需要进行折叠不太方便以及美观性不足,并且在发票多的时候还会造成纸张的浪费,怎么将多张发票打印在一张A4纸上呢? 推荐方法 1.前期准备: (1 ...
如何开具和交付给客户电子发票
本文是山东税务的电子发票,随着电子发票的流行,电子发票传递方便,客户可当天收到发票,且不需要邮寄,可以给公司省去运费.省去了销售方打印发票和盖发票章和邮寄的步骤.目前专票没有电子发票,只有普票可以.专 ...
php 微信服务号电子发票,微信公布电子发票解决方案,报销更便利
4月1日消息,昨日微信官方正式公布了电子发票解决方案. 电子发票解决方案调用了微信多个产品能力,通过微信公众号.卡包.扫一扫.企业号.微信支付零钱包等提供的整体连接能力,与众多行业合作伙伴一起,尝试实 ...
基于诺诺电子发票平台开发开具电子发票
目前做几个系统的整合,将之前做的移动端,小程序,PC端整合到一个系统中,今天整合电子发票的开具功能.发现去年写的代码真是low到家了,重新梳理了一下,现在做一下总结. 今天查看诺诺发票官网,发现已经更 ...

前端如何实现一张电子发票页面

实现电子发票预览

前端如何实现一张电子发票页面相关推荐

最新文章

热门文章