CSV导入开源项目教程

最新推荐文章于 2024-10-11 07:41:48 发布

贾雁冰

最新推荐文章于 2024-10-11 07:41:48 发布

阅读量456

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00052/article/details/139557310

CSV导入开源项目教程

csv-import The open-source CSV importer, maintained by @tableflowhq 项目地址: https://gitcode.com/gh_mirrors/cs/csv-import

1、项目介绍

CSV导入项目是一个开源的CSV和XLS/XLSX文件导入工具，主要用于React和JavaScript应用。该项目由@tableflowhq维护，旨在帮助开发者轻松地将CSV和XLS/XLSX文件导入到他们的应用中。通过使用React或JavaScript SDK，开发者可以快速集成CSV导入功能，并自定义导入的列和数据处理逻辑。

2、项目快速启动

安装SDK

首先，使用NPM或Yarn安装CSV导入SDK。以下是安装命令：

# 使用NPM安装React SDK
npm install csv-import-react

# 使用NPM安装JavaScript SDK
npm install csv-import-js

# 使用Yarn安装React SDK
yarn add csv-import-react

# 使用Yarn安装JavaScript SDK
yarn add csv-import-js

添加导入器到应用

使用React

在React应用中，可以通过以下代码集成CSV导入器：

import React, { useState } from "react";
import { CSVImporter } from "csv-import-react";

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>打开CSV导入器</button>
      <CSVImporter
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        darkMode={true}
        onComplete={(data) => console.log(data)}
        template={[
          {
            columns: [
              {
                name: "First Name",
                key: "first_name",
                required: true,
                description: "用户的名字",
                suggested_mappings: ["First", "Name"],
              },
              {
                name: "Age",
                data_type: "number",
              },
            ],
          },
        ]}
      />
    </>
  );
}

使用JavaScript

在JavaScript应用中，可以通过以下代码集成CSV导入器：

<head>
  <script src="https://unpkg.com/csv-import-js@latest/index.js"></script>
</head>
<body>
  <button id="uploadButton">打开CSV导入器</button>
  <div id="app"></div>
  <script>
    const importer = CSVImporter.createCSVImporter({
      domElement: document.getElementById("app"),
      modalOnCloseTriggered: () => importer.closeModal(),
      onComplete: (data) => console.log(data),
      darkMode: true,
      template: [
        {
          columns: [
            {
              name: "First Name",
              key: "first_name",
              required: true,
              description: "用户的名字",
              suggested_mappings: ["First", "Name"],
            },
            {
              name: "Age",
              data_type: "number",
            },
          ],
        },
      ],
    });

    const uploadButton = document.getElementById("uploadButton");
    uploadButton.addEventListener("click", () => {
      importer.showModal();
    });
  </script>
</body>