Flatfile.com CSV 导入器适配器

一个简单的适配器,用于优雅地导入数据(CSV, XLS & more) 通过 flatfile.com (中文(简体) ) (Typescript,ES6,浏览器)

重要说明: 虽然以下信息是起跑的基本方式,但我们建议阅读开发商Docs https://flatfile.com/developers/javascript/得到启动

另注: 如果你在使用Angular或React, 我们有特定的软件包。 看看我们 在 GitHub 上反应软件包 财务报告和审定财务报表 GitHub 上的角包。 。 。 .

许可证密钥

为了建立起来 你需要 创建或签名到您的 flatfile.com 账户 并获得许可证钥匙.

更改日志

欲查看有关最新发布和任何小/重大修改的资料,请查看 这里的更改日志。 。 。 .

注:在2.8版中,先前可用的"深入"(用于界面)被移动到根位 @flatfile/adapter。 。 。 .

利用国家预防机制

如果你不喜欢外部的依赖性,或者你有像Webpack这样的良好的构建系统到位. 您可以安装并使用 Flatfile 作为 npm 包.

npm i @flatfile/adapter --save

使用 CDN 软件

最新版本的软件包通过CDN提供,这样你就可以把它扔入自己的网站并开始使用.

https://unpkg.com/@flatfile/adapter/build/dist/index.min.js

快速启动

结尾前添加以下代码 </body> 标记在您的 html 中.

<script src="https://unpkg.com/@flatfile/adapter/build/dist/index.min.js"></script>

<script>
  const LICENSE_KEY = '00000000-0000-0000-0000-000000000000' // replace this with your license key

  const importer = new FlatfileImporter(LICENSE_KEY, {
    type: 'Robot',
    fields: [
      {
        label: 'Name',
        key: 'name',
        validators: [ { validate: 'unique' } ]
      },
      {
        label: 'Phone',
        key: 'phone',
        alternates: ['number', 'tel'],
        validators: [
          {
            validate: 'regex_matches',
            regex: '^\d{10}$'
          }
        ]
      },
      {
        label: 'Country',
        key: 'country',
        type: 'select',
        options: [
          { value: 'US', label: 'United States' },
          { value: 'CA', label: 'Canada' }
        ]
      }
    ]
  })

  // More info: https://flatfile.com/developers/javascript/getting-started/#the-basics
  importer.setCustomer({
    userId: '1'
  })

  importer.requestDataFromUser().then((results) => {
    importer.displayLoader('Please wait while your data is loading')

    // do something with your data
    setTimeout(() => {
      // console.log(results)

      importer.displaySuccess('You are all done!')
    }, 1000)
  })
</script>

ES6 / 贝贝

const LICENSE_KEY = '00000000-0000-0000-0000-000000000000' // replace this with your license key

const importer = new FlatfileImporter(LICENSE_KEY, {
  type: 'Robot',
  fields: [
    {
      label: 'Name',
      key: 'name'
    }
  ]
})

// More info: https://flatfile.com/developers/javascript/getting-started/#the-basics
importer.setCustomer({
  userId: '1'
})

document.querySelector('button').addEventListener('click', async () => {
  try{
    const results = await importer.requestDataFromUser()

    importer.displayLoader('Please wait while your data is loading')

    // do something with your data
    setTimeout(() => {
      // console.log(results)

      importer.displaySuccess('You are all done!')
    }, 1000)
  }catch(e){
    // handle a failed upload
  }
})

数据钩子

Flatfile's Data Hooks是一个有用的数据愈合元素,用于在导入过程中自动重排格式,验证和/或更正数据而无需用户手动更正.

详情: 数据钩开始

const importer = new FlatfileImporter(LICENSE_KEY, {
  type: 'Robot',
  fields: [
    {
      label: 'Name',
      key: 'name'
    }
  ]
})

importer.setCustomer({
  userId: '1'
})

// adding a data hook that will add 'Jr.' to the name in each row
importer.registerRecordHook((row) => {
  // Example row: {name: 'John'}
  const result = {};

  if (row.name) {
    result.name = {
      value: `${row.name} Jr.`
    };
  }

  return result;
});

主题

他们让你独立控制了Flatfile门户网站的外观和感觉. 您可以在此调整进口商内部的全局样式和单个组件, 以及控制 CSS 伪类 : hover & : 聚焦于按钮 .

详情: 自定义平面文件端口的主题

const importer = new FlatfileImporter(LICENSE_KEY, {
  type: 'Robot',
  fields: [
    {
      label: 'Name',
      key: 'name'
    }
  ],
  theme: {
    global: {
      backgroundColor: '#212327',
      textColor: '#c2c3c3',
      primaryTextColor: '#c2c3c3',
      secondaryTextColor: '#c2c3c3',
      successColor: '#c2c3c3',
      warningColor: '#c2c3c3'
    },
    // other keys below
  }
})

承诺覆盖

Flatfile包括一个基本本土相容的许诺 shim 用于IE支持. 您可以使用以下全局设置, 以您的首选库来覆盖 :

FlatfileImporter.Promise = Bluebird.Promise