digital-invoice/README.md

数电发票、vue发票展示、vue发票模板、vue发票样式

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

---


## Install - 安装

```bash
npm install digital-invoice --save
```

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

---


## Usage - 使用方法

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

// 局部注册
components: {
  DigitalInvoice
}
```

示例：

```html
<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**
- 自动适配高度：内部会动态设置容器高度避免裁切

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

```html
<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|

### 注意事项（必看）

```text
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）
- 组件首次发布

---