@fescotech/invoice-preview

发票预览

介绍

适用于业务需求中需要进行发票预览，包含普票、专票的预览， 调用方法返回预览信息的dom结构，支持CommonJS, AMD, script tag的使用.兼容IE11.

安装

npm install @fescotech/invoice-preview

本地调试

• 引入项目中调试

先git clone将项目下载至本地，然后通过npm link [此项目存放路径]，即可引入使用本项目，后续如下。
如有有使用异常，删除包，尝试清空缓存问题, npm cache clean -f

• 本包单独调试

git clone;
修改~/src/index.js代码
npm run build
浏览器中打开~/test/index.html查看实际效果

使用方式

import invoicePreview from 'invoice-preview'

const previewInfo = {
  type: 'common', // 普票 || 专票 'common' || 'special'
  showHeader: true, // 是否显示头部
  showFooter: true, // 是否显示底部
  header: {},
  content: {},
  footer: {}
}
// previewInfo: _要预览的发票信息_
const htmlStr = invoicePreview(previewInfo)
// 将接收到的htmlStr放进Modal或者指定的dom节点中
document.getElementById('preShow').innerHTML = htmlStr

示例

根目录下test文件夹中index.html中可以预览

注意

实际要预览的数据各字段名需要与当前代码一一对应

const info = {
  type: 'common',
  showHeader: true, // 是否显示头部
  showFooter: true, // 是否显示底部
  header: {
    address: '北京',
    checkCode: '11111 22222 33333',
    billingDate: '2022年02月24日',
    NO: '12345678',
    qrCodeUrl: 'https://img-blog.csdnimg.cn/20200303093515975.png',
    num1: '011001800305',
    num2: '14903841'
  },
  content: {
    seller: {
      name: '飞机撒弗兰克',
      num: '4721212313ERWEWEWR',
      tel: '18211111111',
      account: '21212121212'
    },
    psw: '97323>*dajkdkj<<dakldkadl\>\<\\dasdasddaskdlsak*daskdlasdk128912u31823-=-0-=->8',
    list: [
      {
        title: '*经济代理服务*服务费',
        model: '型号',
        unit: '个',
        num: 1,
        price: 12.34,
        total: 34234.343,
        taxRate: '6%',
        tax: 1212.42
      },
    ],
    totalAmount: 234.234,
    totalTaxRate: 12.34,
    total: {
      upCase: '壹拾贰万叁千肆佰伍',
      lowerCase: '12345.00'
    },
    buyer: {
      name: '飞机撒弗兰克',
      num: '4721212313ERWEWEWR',
      tel: '18211111111',
      account: '21212121212'
    },
    mark: '22032323323232323-40 323232'
  },
  footer: {
    payee: '郑晓茜',
    review: '郑晓茜',
    issuer: '郑晓茜',
    seller: ''
  }
}

CHANGELOG

V0.1.0

第一版

V0.1.1

在antdv中引入时受到框架样式的影响