Digital Invoice（数电发票组件）

高可扩展、可配置、自动缩放的数电发票展示组件。
问题反馈：wx: zkhh6666

Install - 安装

npm install digital-invoice --save

warning：强烈建议设置 key（避免数据复用问题）

Usage - 使用方法

import DigitalInvoice from 'digital-invoice'
import 'digital-invoice/DigitalInvoice.css' 
// 全局注册
Vue.use(DigitalInvoice)

// 局部注册
components: {
  DigitalInvoice
}

示例：

<template>
  <div style="width:600px">
    <DigitalInvoice
      :InvoiceInformation="info"
      :InitData="tableData"
      :columns="columns"
    />
  </div>
</template>

Props（属性配置）

|参数名称|说明|类型|默认值| |---|---|---|---| |preinstallLocation|主表字段占位配置|Array|Stipulate| |InvoiceInformation|主表内容|Object|defaultData| |IsQrCode|是否显示二维码|Boolean|true| |columns|主表 table 表头|Array|columns| |InitData|主表 table 数据|Array|InitData| |SecondColumns|第二 table 表头|Array|SecondColumns| |SecondInitData|第二 table 数据|Array|SecondInitData| |SecondTableType|第二 table 类型（行业扩展）|String|''| |hellpChinessNum|数字转中文金额|Boolean|false| |autoCount|自动计算金额与税额（优先级最高）|Boolean|false| |IsScale|字体是否跟随缩放|Boolean|false| |specialIndustryVisible|是否显示特殊行业标识|Boolean|false| |lineColor|线条颜色|String|#964300| |fontColor|字体颜色|String|#964300| |baseWidth|设计稿基础宽度（用于缩放）|Number|900| |baseHeight|设计稿基础高度（用于缩放）|Number|600|

自动缩放说明（Auto Scale）

组件内部包含：

• 使用 ResizeObserver 自动监听外层容器大小
• 自动根据 baseWidth 等比缩放整个发票组件
• 限制缩放范围：0.5 ~ 2
• 自动适配高度：内部会动态设置容器高度避免裁切

使用方法非常简单，只需限制外层宽度即可：

<div style="width:600px">
  <DigitalInvoice />
</div>

事件 Events

|事件名称|说明|参数|必填| |---|---|---|---| |ModalInvoiceList|点击“详见清单”时触发（外部自定义弹窗）|-|否|

preinstallLocation 说明

|字段|说明|类型| |---|---|---| |index|字段序号|Number| |key|字段名（如 buyerName）|String| |disable|是否禁用|Boolean| |style|允许设置样式（支持第 0 和第 1 项）|Object|

说明：

• 第 0 项：可通过 padding 调整标题头“重脚轻”问题
• 第 1 项：适用于特殊票种，自定义颜色、padding 等

Column 表头结构

|字段|说明|类型| |---|---|---| |title|列名称|String| |width|宽度百分比（如 24%）|String| |dataIndex|字段名（如 amount）|String| |key|唯一 key（建议与 dataIndex 一致）|String| |align|对齐方式：left / right / center|String|

注意事项（必看）

1、columns 中 “amount(金额)”、“taxScheme(税率)”、“taxAmount(税额)” 必须指定固定 key。
   👉 清单发票依赖这些 key 进行计算与渲染。

2、二维码支持两种格式：
   - 网络 URL（http://example.com）
   - base64（data:image/png;base64,xxxx...）

优化特性（当前组件具备）

• 全局缩放（基于 transform: scale）
• transform-origin 固定为左上角，缩放更自然
• 自动高度适配
• 主题色支持（字体/线条颜色）
• 完全响应式能力
• table 支持多行业（第二表格）

版本记录

v1.0.0（2022-12-02）

• 组件首次发布