Data Import Plugin

Function Introduction

ExcelImportPlugin is an import plugin designed to provide users with an efficient solution for importing multiple formats of external data files. This plugin supports data import in Excel, CSV, JSON and HTML formats.

Plugin Description

The plugin will add importFile method to the table instance.

• importFile: import file, will pop up a file selector, and the user will select the file, and the file data will be automatically imported.

await tableInstance.importFile();

You can also directly call the import method, pass in the file path, or file object, or file content. The following has been introduced:

Supported data formats

• Excel File
• CSV File (Supporting Custom Delimiters)
• JSON Object
• HTML Data

Service restrictions

The current version does not support the import function of PivotTable data.

Plugin configuration

ExcelImportOptions

The plugin constructor accepts a configuration object, which must implement the ExcelImportOptions interface. The following is a complete description of the configuration parameters:

interface ExcelImportOptions {
  id?: string;                        // The unique identifier of the plugin instance, which by default will use excel-import-plugin-${Date.now()};
  headerRowCount?: number;             // The number of header rows in an Excel file is only valid for Excel format. If not specified, it will be automatically detected.
  exportData?: boolean;                // Whether to export as JavaScript object format. The default is false.
  autoTable?: boolean;                 // Whether to automatically replace the table data. The default setting is true.
  autoColumns?: boolean;               // Whether to automatically generate column configuration, default is true
  delimiter?: string;                  // CSV file delimiter, default is the English comma
  batchSize?: number;                  // Batch processing data row count, default value is 1000
  enableBatchProcessing?: boolean;     // Whether to enable batch processing mode. The default is true.
  asyncDelay?: number;                 // Asynchronous processing delay time (in milliseconds), default value is 5
}

name of parameter	type	default	explain
id	string	excel-import-plugin-${Date.now()}	Plugin instance identifier, used to distinguish multiple plugin instances
headerRowCount	number	-	Specify the number of header rows in the Excel file. This setting is only applicable to Excel files.
exportData	boolean	false	Control whether to export the data in JavaScript object format
autoTable	boolean	true	Control whether to automatically replace the existing data in the table
autoColumns	boolean	true	Control whether columns are automatically configured based on the imported data
delimiter	string	','	The field delimiter of a CSV file
batchSize	number	1000	The number of data rows processed in each batch under batch processing mode
enableBatchProcessing	boolean	true	Should the batch processing mode be enabled to optimize memory usage?
asyncDelay	number	5	Delay time (in milliseconds) during the asynchronous processing process

import function

The core method of the plugin is responsible for performing the data import operation.

async import(
  type: 'file' | 'csv' | 'json' | 'html',
  source?: string | object,
  options?: Partial<ExcelImportOptions>
): Promise<ImportResult>

type（necessary）

• type：'file' | 'csv' | 'json' | 'html'
• explain：Specify the type of imported data
  • 'file'：Import files through the file selector
  • 'csv'：Import string data in CSV format
  • 'json'：Import data objects in JSON format
  • 'html'：Import data in HTML table format

source（optional）

• type：string | object
• explain：Data source content
  • When type is set to 'file', this parameter is invalid.
  • When type is either 'csv', 'html', or 'json', a string or object in the corresponding format should be passed in.

options（optional）

• type：Partial<ExcelImportOptions>
• explain：The runtime configuration parameters will temporarily override the configuration set during the plugin initialization.

operating guide

Plugin initialization

First, a plugin instance needs to be created and added to the plugin configuration of the VTable:

//初始化插件
const excelImportPlugin = new ExcelImportPlugin({
  exportData: true
});
const option: VTable.ListTableConstructorOptions = {
  container: document.getElementById(CONTAINER_ID),
  records,
  columns,
  theme: VTable.themes.DEFAULT,
  select: { disableSelect: false },
  plugins: [excelImportPlugin]
};

Usage example

File import

Import local files through the file selector:

await excelImportPlugin.import('file');

await excelImportPlugin.import('file', undefined, {
  exportData: true,
  delimiter: ';' 
});

CSV data import

Import string data in CSV format:

const csvData1 = `姓名,年龄,部门
张三,25,技术部
李四,30,销售部
王五,28,市场部`;

await excelImportPlugin.import('csv', csvData1);

const csvData2 = `姓名;年龄;部门
张三;25;技术部
李四;30;销售部`;

await excelImportPlugin.import('csv', csvData2, {
  delimiter: ';'
});

Disable automatic table updates

Only obtain data without automatically updating the table:

const result = await excelImportPlugin.import('json', jsonData, {
  autoTable: false,
});

演示代码

This document was contributed by:

Abstract chips