@ csvbox/ 反应
Csvbox.io 的反应适配器
贝壳
npm install @csvbox/react
导入
import { CSVBoxButton } from '@csvbox/react'
使用量
<CSVBoxButton
licenseKey="Sheet license key"
user={{
user_id: "default123"
}}
onImport={(result, data) => {
if(result){
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
}else{
console.log("fail");
//custom code
}
}}
>
Import
</CSVBoxButton>
导入您已有的文件
openModalWithFile(file) 在 File 自己的页面是持有—— 从您的
自己的投放目标,你自己的文件输入,任何东西——而不是进口商的文件取取器. 这个
文件仍然通过导入者的扩展名、工作表和大小检查
picker, 不是验证.
通过一个参考:
const importer = useRef(null)
<CSVBoxButton ref={importer} licenseKey="Sheet license key" user={{ user_id: "default123" }} onImport={onImport}>
Import
</CSVBoxButton>
<input type="file" onChange={(e) => importer.current.openModalWithFile(e.target.files[0])} />
或从 render prop,它与它的第三个论点具有相同的功能:
<CSVBoxButton
licenseKey="Sheet license key"
user={{ user_id: "default123" }}
onImport={onImport}
render={(launch, isLoading, launchWithFile) => (
<div
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
e.preventDefault()
launchWithFile(e.dataTransfer.files[0])
}}
>
Drop a spreadsheet here, or <button disabled={isLoading} onClick={launch}>browse</button>
</div>
)}
/>
进口商可以拒绝交给的文件 并说为什么在控制台警告中
(单位:千美元)[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())仍然有可能。 最后一个打开的进口商显示在其他进口商的上方,关闭后显示下面的进口商.
进口时关闭进口商
如果您的用户提交文件, 然后在导入完成前关闭导入者, 则导入继续, 并且您 onImport 调用完成后仍随结果调用. 进口商下次打开时会重新装入.
读取
关于用法,请参见指南 https://help.csvbox.io/getting-started #2-install-code 互联网档案馆的存檔,存档日期2013-12-2
许可证
麻省理工学院 csvbox-io (英语)