@ csvbox/ angula 2 (韩语)
Csvbox.io 支持Angular 14 及以上版本的独立角组件
仅针对角版14及以上
QQ 对于Angular 第13版或以下,请使用 @ csvbox/ angular (韩语) 软件包
兼容性
| 角质版本 | 软件包 |
|---|---|
| 8至13岁 | @ csvbox/ angular (韩语) |
| 14岁及以上 | @csvbox/angular2 (这个软件包) |
贝壳
npm install @csvbox/angular2
导入
添加 CSVBoxButtonComponent 到您的模块导入
import { CSVBoxButtonComponent } from "@csvbox/angular2";
@NgModule({
...
imports: [
...
CSVBoxButtonComponent
]
})
使用量
<csvbox-button [licenseKey]="licenseKey" [isImported]="isImported.bind(this)" [user]="user">Import</csvbox-button>
示例
@Component({
selector: 'app-root',
template: `
<csvbox-button
[licenseKey]="licenseKey"
[user]="user"
[isImported]="isImported.bind(this)">
Import
</csvbox-button>
`
})
export class AppComponent {
title = 'example';
licenseKey = 'YOUR_LICENSE_KEY_HERE';
user = { user_id: 'default123' };
isImported(result: boolean, data: any) {
if(result) {
console.log("Sheet uploaded successfully");
console.log(data.row_success + " rows uploaded");
}else{
console.log("There was some problem uploading the sheet");
}
}
}
活动
| 活动 | 说明 |
|---|---|
isReady | 当进口商初始化并准备供用户使用时触发. |
isClosed | 进口商关闭时触发 . |
isSubmitted | 当用户点击“ 提交” 按钮上传已验证文件时触发 . 数据 对象在此事件中可用。 它包含与导入相关的元数据. |
isImported | 当数据被推到目的地时触发. 此事件有两个对象: 1. 结果(布尔): 当导入成功且当导入失败时是虚假的,这是真实的. 2. 数据(对象):包括与导入有关的元数据. |
导入您已有的文件
openModalWithFile(file) 在 File 自己的页面是持有—— 从您的
自己的投放目标,你自己的文件输入,任何东西——而不是进口商的文件取取器. 这个
文件仍然通过导入者的扩展名、工作表和大小检查
picker, 不是验证.
通过模板引用变量调用 :
<csvbox-button #importer [licenseKey]="licenseKey" [user]="user" [isImported]="isImported.bind(this)">
Import
</csvbox-button>
<input type="file" (change)="importer.openModalWithFile($any($event.target).files[0])" />
或来自组件类 @ViewChild(CSVBoxButtonComponent) importer: CSVBoxButtonComponent;
财务报告和审定财务报表 this.importer.openModalWithFile(file)。 。 。 .
进口商可以拒绝交给的文件 并说为什么在控制台警告中
(单位:千美元)[csvbox] importer declined the supplied file: <reason>:
import-in-progress- 进口商已打开其上传步骤,或仍在读 早先的文件 。 已经打开的导入仍然打开 .modal-closing——文件到达时进口商关门.import-file-url-configured——工作表的设置是为了从URL上加载自己的文件.
传出 a File,而不是一个 Blob(单位:千美元) Blob 没有名字可以读取扩展, 和任何
不是一个 File 被忽略.
当输入方重定向到另一个主机时( 数据定位表做此操作), 文件会被发送到主机, 输入方实际上最终会打开, 只要主机是您的输入域或 <region>-<your domain> (例如 eu-app.csvbox.io 页:1 app.csvbox.io) (中文(简体) ). 文件从不会发送给其他主机 .
如果进口商在大约8秒内(例如,由于它重定向到一个没有遵循该命名的主机,或者它太老了,无法知道消息)不回答所提供的文件,则进口商被收起,其他按钮再次被启用,控制台说 [csvbox] the importer did not respond to the supplied file。 。 。 .
一页上的几个进口商
当一个进口商打开(或仍在装入以打开)时,页面上其他每个 CSVBox 实例的按钮被禁用直到关闭,因此两个进口商不会意外打开. 在反应中 render 道具( r)isLoading) 也为 true 在那种状态下,所以自定义触发器可以同样的方式自禁.
从代码中开设第二个进口商(openModal() 或者说 openModalWithFile())仍然有可能。 最后一个打开的进口商显示在其他进口商的上方,关闭后显示下面的进口商.
进口时关闭进口商
如果您的用户提交文件, 然后在导入完成前关闭导入者, 则导入继续, 并且您 isImported (或 onImport)在完成后仍随结果调用回调. 进口商下次打开时会重新装入.
读取
关于用法,请参见指南 https://help.csvbox.io/getting-started #2-install-code 互联网档案馆的存檔,存档日期2013-12-2
许可证
麻省理工学院 csvbox-io (英语)