翻译:
Csvbox.io 的 Vue 适配器
贝壳
npm install @csvbox/vuejs
使用量
<template>
<div>
<CSVBoxButton
:licenseKey="licenseKey"
:user="user"
:onImport="onImport">
Upload File
</CSVBoxButton>
</div>
</template>
<script>
import { CSVBoxButton } from '@csvbox/vuejs';
export default {
name: 'App',
components: {
CSVBoxButton,
},
data: () => ({
licenseKey: 'Sheet license key',
user: {
user_id: 'default123',
},
}),
methods: {
onImport: function (result, data) {
if(result) {
console.log("success");
console.log(data.row_success + " rows uploaded");
//custom code
} else {
console.log("fail");
//custom code
}
}
}
}
</script>
导入您已有的文件
openModalWithFile(file) 在 File 自己的页面是持有—— 从您的
自己的投放目标,你自己的文件输入,任何东西——而不是进口商的文件取取器. 这个
文件仍然通过导入者的扩展名、工作表和大小检查
picker, 不是验证.
通过模板参考调用:
<template>
<div>
<CSVBoxButton ref="importer" :licenseKey="licenseKey" :user="user" :onImport="onImport">
Import
</CSVBoxButton>
<input type="file" @change="onFileChosen" />
</div>
</template>
<script>
export default {
// ...
methods: {
onFileChosen(e) {
this.$refs.importer.openModalWithFile(e.target.files[0]);
}
}
}
</script>
进口商可以拒绝交给的文件 并说为什么在控制台警告中
(单位:千美元)[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())仍然有可能。 最后一个打开的进口商显示在其他进口商的上方,关闭后显示下面的进口商.
读取
关于用法,请参见指南 https://help.csvbox.io/getting-started #2-install-code 互联网档案馆的存檔,存档日期2013-12-2
许可证
麻省理工学院 csvbox-io (英语)