增值税发票预览

最新推荐文章于 2024-05-14 17:04:37 发布
最新推荐文章于 2024-05-14 17:04:37 发布
阅读量157 收藏 1
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36092525/article/details/129013609
版权 
const IssuePreview: FunctionComponent<Props> = (props: Props) => {
  const { invoiceData } = props;
  const {
    invoiceVariety,
    totalExcludingTaxAmount,
    totalTax,
    totalPriceTaxAmount,
    lines,
    remark,
    userRemark,
    invoiceSourceType,
  } = invoiceData;
  const title = invoiceVariety && invoiceVarietyConfig[invoiceVariety];
  const renderHeader = () => {
    return (
      <div className={styles.invoice_top}>
        <Row type="flex" align="bottom" style={{ height: '80px' }}>
          <Col span={8}>
            {totalPriceTaxAmount && totalPriceTaxAmount < 0 && (
              <div className={styles.negative}>
                <span>销 项 负 数</span>
              </div>
            )}
            {invoiceVariety === '2' && (
              <div style={{ textAlign: 'center' }}>
                <span style={{ marginRight: '90px' }}>校验码：</span>
              </div>
            )}
            {['51', '52'].includes(invoiceVariety) && <span>机器编号：</span>}
          </Col>
          <Col span={8}>
            <div style={{ textAlign: 'center' }}>
              <span className={styles.top_middle}>{title}</span>
            </div>
          </Col>
          <Col span={8}>
            <div>
              {['0', '2'].includes(invoiceVariety) && (
                <>
                  <div style={{ fontSize: '24px' }}>No</div>
                  <div style={{ textAlign: 'center' }}>开票日期：</div>
                </>
              )}
              {['51', '52'].includes(invoiceVariety) && (
                <>
                  <div>发票代码：</div>
                  <div>发票号码：</div>
                  <div>开票日期：</div>
                  <div>校&nbsp;验&nbsp;码：</div>
                </>
              )}
            </div>
          </Col>
        </Row>
      </div>
    );
  };
  return (
    <>
      {invoiceVariety === '41' ? (
        <>
          <div className={styles.ticketTile}>
            <div>
              <span>增值税普通发票（卷票）</span>
            </div>
            <div className={styles.ticketSubTit}>
              <span>发&emsp;票&emsp;联</span>
            </div>
          </div>
          <div className={styles.contain}>
            <table className={styles.ticketTable}>
              <tr>
                <td colSpan={4} className={styles.ticketLabel}>
                  发票代码：
                </td>
              </tr>
              <tr>
                <td colSpan={4} className={styles.ticketLabel}>
                  发票代码：
                </td>
              </tr>
              <tr>
                <td width="50%" className={styles.ticketLabel}>
                  机打号码：
                </td>
                <td className={styles.ticketLabel}>机器编号：</td>
              </tr>
              <tr>
                <td colSpan={4}>
                  <span className={styles.ticketLabel}>销售方名称：</span>
                  <span className={styles.ticketField}>{invoiceData.sellerName}</span>
                </td>
              </tr>
              <tr>
                <td colSpan={4}>
                  <span className={styles.ticketLabel}>纳税人识别号：</span>
                  <span className={styles.ticketField}>{invoiceData.sellerTaxpayerNumber}</span>
                </td>
              </tr>
              <tr>
                <td width="50%" className={styles.ticketLabel}>
                  开票日期：
                </td>
                <td>
                  <span className={styles.ticketLabel}>收款员：</span>
                  <span className={styles.ticketField}>{invoiceData.payeeName}</span>
                </td>
              </tr>
              <tr>
                <td colSpan={4}>
                  <span className={styles.ticketLabel}>购买方名称：</span>
                  <span className={styles.ticketField}>{invoiceData.buyerName}</span>
                </td>
              </tr>
              <tr>
                <td colSpan={4}>
                  <span className={styles.ticketLabel}>纳税人识别号：</span>
                  <span className={styles.ticketField}>{invoiceData.buyerTaxpayerNumber}</span>
                </td>
              </tr>
              <tr>
                <td colSpan={4}>
                  <table width="100%" style={{ marginTop: 20 }}>
                    <tr>
                      <td width="25%" className={styles.ticketLabel}>
                        项目
                      </td>
                      <td width="25%" className={styles.ticketLabel}>
                        数量
                      </td>
                      <td width="25%" className={styles.ticketLabel}>
                        含税单价
                      </td>
                      <td width="25%" className={styles.ticketLabel}>
                        含税金额
                      </td>
                    </tr>
                    {!isEmpty(lines) &&
                      lines.map(item => {
                        return (
                          <tr>
                            <td>{item.projectName}</td>
                            <td valign="top">{item.quantity}</td>
                            <td valign="top">{unitPriceTax(item)}</td>
                            <td valign="top">{amountTax(item)}</td>
                          </tr>
                        );
                      })}
                  </table>
                </td>
              </tr>
              <tr>
                <td colSpan={4}>
                  <table width="100%" style={{ marginTop: 40, whiteSpace: 'pre-wrap' }}>
                    <tr>
                      <td colSpan={4}>
                        <span className={styles.ticketLabel}>备注：</span>
                        <span className={styles.ticketField}>{mark}</span>
                      </td>
                    </tr>
                    <tr>
                      <td colSpan={4}>
                        <span className={styles.ticketLabel}>合计金额（小写）：</span>
                        <span className={styles.ticketField}>
                          {totalPriceTaxAmount && totalPriceTaxAmount.toFixed(2)}
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td colSpan={4}>
                        <span className={styles.ticketLabel}>合计金额（大写）：</span>
                        <span className={styles.ticketField}>
                          {invoiceData.totalPriceTaxAmountUpper}
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td colSpan={4} className={styles.ticketLabel}>
                        校验码：
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div>
        </>
      ) : (
        <div className={styles.background}>
          {renderHeader()}
          <div>
            <table className={styles.invoiceTable}>
              <tr>
                <td className={styles.topSide}>购买方</td>
                <td width="55%">
                  <span className={styles.label}>名&emsp;&emsp;&emsp;&emsp;称：</span>
                  <span className={styles.labelField}>{invoiceData.buyerName}</span>
                  <br />
                  <span className={styles.label}>纳税人识别号：</span>
                  <span className={styles.labelField}>{invoiceData.buyerTaxpayerNumber}</span>
                  <br />
                  <span className={styles.label}>地&nbsp;址、电&nbsp;话：</span>
                  <span className={styles.labelField}>{invoiceData.buyerCompanyAddressPhone}</span>
                  <br />
                  <span className={styles.label}>开户行及账号：</span>
                  <span className={styles.labelField}>{invoiceData.buyerBankNumber}</span>
                </td>
                <td className={styles.topSide}>密码区</td>
                <td />
              </tr>
            </table>
            <table className={styles.goodTable}>
              <tr style={{ textAlign: 'center' }}>
                <td width="30%">
                  <span className={styles.goodLabel}>{thTitle}</span>
                </td>
                <td width="10%">
                  <span className={styles.goodLabel}>规格型号</span>
                </td>
                <td width="5%">
                  <span className={styles.goodLabel}>单位</span>
                </td>
                <td width="10%">
                  <span className={styles.goodLabel}>数量</span>
                </td>
                <td width="10%">
                  <span className={styles.goodLabel}>单价</span>
                </td>
                <td width="15%">
                  <span className={styles.goodLabel}>金额</span>
                </td>
                <td width="5%">
                  <span className={styles.goodLabel}>税率</span>
                </td>
                <td width="15%">
                  <span className={styles.goodLabel}>税额</span>
                </td>
              </tr>
              {!isEmpty(lines) &&
                lines.map(item => {
                  return (
                    <tr key={item.invoicingOrderLineId} className={styles.goodInfo}>
                      <td width="30%" align="left">
                        <span>{item.projectName}</span>
                      </td>
                      <td width="10%" align="left">
                        <span>{item.model}</span>
                      </td>
                      <td width="5%" align="center">
                        <span>{item.projectUnit}</span>
                      </td>
                      <td width="10%" align="right">
                        <span>{item.quantity}</span>
                      </td>
                      <td width="10%" align="right">
                        <span>{calcUnitPrice(item)}</span>
                      </td>
                      <td width="15%" align="right">
                        <span>{calcAmount(item)}</span>
                      </td>
                      <td width="5%" align="right">
                        <span>{calcTaxRate(item)}</span>
                      </td>
                      <td width="15%" align="right">
                        <span>{item.taxAmount}</span>
                      </td>
                    </tr>
                  );
                })}
              <tr className={styles.total}>
                <td width="30%" align="center" className={styles.goodLabel}>
                  合计
                </td>
                <td width="10%" />
                <td width="5%" />
                <td width="10%" />
                <td width="10%" />
                <td width="15%" align="right">
                  <span>￥{totalExcludingTaxAmount}</span>
                </td>
                <td width="5%" />
                <td width="15%" align="right">
                  <span>￥{totalTax}</span>
                </td>
              </tr>
              <tr className={styles.goodBottom}>
                <td align="center" className={styles.goodLabel}>
                  价税合计（大写）
                </td>
                <td colSpan={4} style={{ borderRight: 'none' }}>
                  {invoiceData.totalPriceTaxAmountUpper}
                </td>
                <td colSpan={3}>
                  <span className={styles.goodLabel}>(小写)</span>
                  <span>￥{totalPriceTaxAmount && totalPriceTaxAmount.toFixed(2)}</span>
                </td>
              </tr>
            </table>
            <table className={styles.sellerInfo}>
              <tr>
                <td className={styles.topSide}>销售方</td>
                <td width="55%">
                  <span className={styles.label}>名&emsp;&emsp;&emsp;&emsp;称：</span>
                  <span className={styles.labelField}>{invoiceData.sellerName}</span>
                  <br />
                  <span className={styles.label}>纳税人识别号：</span>
                  <span className={styles.labelField}>{invoiceData.sellerTaxpayerNumber}</span>
                  <br />
                  <span className={styles.label}>地&nbsp;址、电&nbsp;话：</span>
                  <span className={styles.labelField}>{invoiceData.sellerCompanyAddressPhone}</span>
                  <br />
                  <span className={styles.label}>开户行及账号：</span>
                  <span className={styles.labelField}>{invoiceData.sellerBankNumber}</span>
                </td>
                <td className={styles.topSide}>备注</td>
                <td valign="top" style={{ padding: '0 4px' }}>
                  <span className={styles.remark}>{mark}</span>
                </td>
              </tr>
            </table>
            <table className={styles.bottomTable}>
              <tr>
                <td width="10%" align="right" className={styles.label}>
                  收款人：
                </td>
                <td width="15%" className={styles.labelField}>
                  {invoiceData.payeeName}
                </td>
                <td width="10%" align="right" className={styles.label}>
                  复核：
                </td>
                <td width="15%" className={styles.labelField}>
                  {invoiceData.reviewerName}
                </td>
                <td width="10%" align="right" className={styles.label}>
                  开票人：
                </td>
                <td width="15%" className={styles.labelField}>
                  {invoiceData.issuerName}
                </td>
                {invoiceVariety !== '52' && (
                  <td width="25%" className={styles.label}>
                    销售单位：（章）
                  </td>
                )}
              </tr>
            </table>
          </div>
        </div>
      )}
    </>
  );
};

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.containTable:extend(.flex) {
  height: 54px;

  .title {
    margin: 0;
    margin-right: 16px;
  }
}

.tableTitleRight:extend(.flex) {
  padding: 8px 0 8px 16px;
  background: #eff6ff;
  border-radius: 4px;

  p {
    margin: 0;
    color: #5a6677;
  }

  span {
    margin-right: 24px;
    color: blue;
    opacity: 1;
  }
}

.customTable {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 16px;
}

.invoiceContainer:extend(.flex) {
  justify-content: space-around;
  width: 500px;
  margin-top: 10px;
}

.background {
  background-image: url('https://digi.aisino.com:8003/images/fpylbj.png');
  background-repeat: no-repeat;
  background-position: 55% 63%;
}

.invoice_top {
  width: 100%;
  color: #9e520a;
  font-family: '楷体', serif;
  font-size: 13px;
  height: 80px;
}

.negative {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  text-align: center;
  font-family: '微软雅黑', serif;

  span {
    margin-left: 70px;
  }
}

.top_left {
  width: 28%;
}

.top_middle {
  position: relative;
  bottom: 50px;
  color: #9e520a;
  font-size: 26px;
  line-height: 20px;
}

.top_right {
  width: 30%;
  text-align: right;
}

.invoiceTable {
  width: 100%;
  border-top: 1px solid #b88787;
  border-left: 1px solid #b88787;
  border-bottom: 1px solid #b88787;

  td {
    border-right: 1px solid #b88787;
    border-bottom: 1px solid #b88787;
    line-height: 25px;
  }
}

.sellerInfo {
  width: 100%;
  border-left: 1px solid #b88787;
  border-right: 1px solid #b88787;
  border-bottom: 1px solid #b88787;
  white-space: pre-wrap;

  td {
    border-right: 1px solid #b88787;
    line-height: 25px;
  }
}

.goodTable {
  width: 100%;
  border-left: 1px solid #b88787;
  //border-right: 1px solid #b88787;
  border-bottom: 0.5px solid #b88787;

  td {
    border-right: 1px solid #b88787;
  }
}

.goodBottom {
  td {
    border-top: 1px solid #b88787;
    padding: 0 4px;
  }
}

.goodInfo {
  td {
    line-height: 28px;
    padding: 0 4px;
  }
}

.topSide {
  width: 25px;
  padding: 0 6px;
  color: #9e520a;
}

.total {
  td {
    padding: 0 4px;
  }
}

.label {
  color: #9e520a;
  padding: 0 4px;
  font-family: '楷体', serif;
  font-size: 14px;
}

.goodLabel {
  color: #9e520a;
  text-align: center;
  line-height: 25px;
  font-family: '楷体', serif;
  font-size: 14px;
}

.labelField {
  font-family: '微软雅黑', serif;
}

.code {
  color: #000;
  font-family: '微软雅黑', serif;
}

.remark {
  font-family: '微软雅黑', serif;
  //padding: 0 4px;
  word-break: break-all;
}

.bottomTable {
  width: 100%;

  td {
    line-height: 25px;
  }
}

.ticketTile {
  font-size: 18px;
  color: #574b9d;
  text-align: center;
}

.ticketSubTit {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 700;
}

.contain {
  margin: 0 auto;
  padding: 20px;
  border: 1px dashed rgb(204, 204, 204);
  width: 500px;
  line-height: 30px;
  background-color: rgb(247, 247, 247);
}

.ticketTable {
  width: 100%;
  background-image: url('https://digi.aisino.com:8003/images/fpylbj.png');
  background-repeat: no-repeat;
  background-size: 135%;
  background-position: center;
}

.ticketLabel {
  font-size: 14px;
  color: #9e520a;
}

.ticketField {
  font-size: 14px;
  color: #574b9d;
}

.invoiceModal {
  width: calc(63vw) !important;
}
qq_36092525
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html发票页面,HTML5 发票模板
weixin_39580041的博客
06-07 1473
CSS语言：CSSSCSS确定/* ---------------------------------------------Assets--------------------------------------------- *//* ---------------------------------------------Colors-----------------------------...
上传发票图片并调用百度API，识别增值税发票文字内容
08-01
上传发票图片并调用百度API，识别增值税发票文字内容； C# Winform程序，控件采用的是DevExpress，目前只调用了增值税发票一个接口，其他内容请使用者自行研究； ***请用VS2019打开 ***使用者需要自己去百度申请Api...
普通发票（增值税专用发票）html+css
weixin_44110923的博客
06-25 3945
因业务需要，将发票样式呈现出来。直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
发票-html
weixin_45939821的博客
07-20 628
【代码】发票-html。
html实现无插件套打,发票套打系统
weixin_39528559的博客
06-17 1030
极限小编今天为大家带来了发票套打系统，发票套打程序可新增、删除、修改发票模板，设置发票宽度和高度，能很方便地实现套打。可以根据需要添加无数多个发票模板。发票项目的位置调整灵活、方便。特点介绍1、可以根据需要添加无数多个发票模板。2、既可以整体设置发票字体、字号，也可以单独设置指定发票项目的字体、字号。3、可以方便设置人民币符号、发票号码NO标志是否打印以及它们的位置及大小。4、小数位数无需设定，可...
前端如何实现一张电子发票页面
qq_43834495的博客
03-28 1770
最近需要在react项目中实现预览发票的功能，要求发票和新版税务局样式保持一致，为方便查看使用。栏是固定高度，项目较多时通过上下滑动滚动条查看。
A4纸张打印增值税发票操作指导
baidu_16315915的博客
07-08 2662
A4纸张打印增值税发票
增值税发票开票软件卷票打印错位配置修正指南
Right! I'm Max Sky.
06-11 3131
先打开参数设置页面，对比一下配置（打印机型号可忽略） 规格一般选择左边的 76x177 即可 打印机设置里面，建议在测试阶段将打印机修改为 Microsoft Print to PDF 或 导出为 WPS PDF 此处建议设置为 WPS PDF，因为 Microsoft Print to PDF 导出的 PDF 文件是一张 A4 纸大小，而 WPS PDF 导出来则是正常发票大小 此时打开 增值税发票开票软件 安装目录，找到两个文件： printer.ini printerset.ini 首先记事本之
ABAP调用baidu ORC增值税发票识别接口识别发票信息
qq_33852362的博客
02-20 384
ABAP调用 baidu API实现发票识别
增值税发票清单导入模版
04-02
增值税发票在开具时，明细多时可以用此导入，不必一行一行手工录入
增值税发票(金税盘)发票清单批量导入模板XML_20220517
05-17
Excle生成XML文件，增值税发票税控开票软件中导入， 一个客户可以生成多张发票导入， 增值税发票(金税盘)发票清单批量导入模板XML，2022年5月可用
增值税普通发票源码
10-12
增值税普通发票，是将除商业零售以外的增值税一般纳税人纳入增值税防伪税控系统开具和管理，也就是说一般纳税人可以使用同一套增值税防伪税控系统开具增值税专用发票、增值税普通发票等，俗称“一机多票”。
增值税发票综合服务平台操作手册V4.0.20.zip
04-02
增值税发票综合服务平台操作手册V4.0.20.zip
vue的css深度选择器 deep /deep/
m0_75269526的博客
05-08 692
/deep/ ::v-deep :deep vue深度选择器，elementui调整样式不起效果当我们遇到需要在一个组件中想要影响到子组件，就可以使用深度选择器，而::v-deep 在vue3中已经启用了 /deep/ 和>>>有存预处理器不支持和浏览器兼容为题，综上所述，使用:deep()是最佳的解决方案。
使用html和css实现个人简历表单的制作
qq_49370210的博客
05-12 756
Ⅰ、表格整体的边框为1像素，单元格间距为0，表格中前六列列宽均为100像素，第七列 为200像素，表格整体在页面上居中显示；Ⅲ、第一行合并了7列；第六 行合并了六列；照片的单元格合并了四行。Ⅱ、前五行的行高为40像素，第六行的行高为80像素，排列方式均为居中显示；CSS文件{style.css}
【CSS基础--CSS选择器的常见用法】
m0_63440113的博客
05-08 377
层叠样式表，由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。
css案例 tab上下滚动，左右滚动
weixin_38982591的博客
05-11 354
【代码】css案例 tab上下滚动，左右滚动。
css: 动态设置网格线
最新发布
1111111111
05-14 281
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
html绘制增值税发票
10-19
3.使用Canvas API绘制增值税发票的具体内容，例如发票抬头、发票明细、发票金额等。 4.根据引用中的规定，对销售税金额进行向上舍入到最接近的0.05处理。 5.根据引用中的方法，设置监制章图片。 6.根据引用中的方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值