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

实现电子发票预览

最近需要在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,
                } = item
                return (
                  <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>
  )
}

这篇好文章是转载于：学新通技术网