Перейти к основному содержимому

Загрузка и экспорт данных

Вы можете заполнить DHTMLX Spreadsheet подготовленным набором данных, который может включать как данные ячеек, так и стили. Компонент поддерживает два способа загрузки данных:

  • загрузка из внешнего файла
  • загрузка из локального источника

Компонент также поддерживает экспорт данных в файл Excel.

Подготовка данных​

DHTMLX Spreadsheet ожидает данные в формате JSON.

Это может быть простой массив объектов ячеек. Используйте этот способ, если нужно создать набор данных только для одного листа.

Подготовка данных для одного листа
const data = [
    { cell: "A1", value: "Country" },
    { cell: "B1", value: "Product" },
    { cell: "C1", value: "Price" },
    { cell: "D1", value: "Amount" },
    { cell: "E1", value: "Total Price" },

    { cell: "A2", value: "Ecuador" },
    { cell: "B2", value: "Banana" },
    { cell: "C2", value: 6.68, format:"currency" },
    { cell: "D2", value: 430, format:"percent" },
    // "myFormat" is the id of a custom format
    { cell: "E2", value: 2872.4, format:"myFormat" },
    
    // add drop-down lists to cells
    { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} },
    { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } },

    // more cell objects
];

Или это может быть объект с данными для загрузки сразу в несколько листов. Например:

Подготовка данных для нескольких листов
const data = {
    sheets: [
        { 
            name: "sheet 1", 
            id: "sheet_1",
            data: [
                { cell: "A1", value: "Country" },
                { cell: "B1", value: "Product" },
                // more data
            ],
            merged: [
                // merge cells A1 and B1
                { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } },
                // merge cells A2, A3, A4, and A5
                { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } },
            ]
        }, 
        { 
            name: "sheet 2", 
            id: "sheet_2", 
            data: [
                { cell: "A1", value: "Country" },
                { cell: "B1", value: "Product" },
                // more data
            ]
        },
        // more sheet objects
    ]
};

Ознакомьтесь с полными списками доступных свойств для этих двух способов в справочнике API.

Подсказка

Возможность загрузки объединённых ячеек доступна только при подготовке данных в объекте листа.

Задание стилей для ячеек​

Возможно, вам потребуется определить стили ячеек в наборе данных. В этом случае данные должны быть объектом с отдельными свойствами, описывающими объекты данных и CSS-классы, применяемые к конкретным ячейкам.

Задайте CSS-класс для ячейки с помощью свойства css.

const styledData = {
    styles: {
        someclass: {
            background: "#F2F2F2",
            color: "#F57C00"
        }
    },
    data: [
        { cell: "A1", value: "Country" },
        { cell: "B1", value: "Product" },
        { cell: "C1", value: "Price" },
        { cell: "D1", value: "Amount" },
        { cell: "E1", value: "Total Price" },

        { cell: "A2", value: "Ecuador" },
        { cell: "B2", value: "Banana" },
        { cell: "C2", value: 6.68, css: "someclass" },
        { cell: "D2", value: 430, css: "someclass" },
        { cell: "E2", value: 2872.4 }
    ],
}
К сведению

Ознакомьтесь со списком свойств, которые можно использовать для стилизации ячеек

Задание заблокированного состояния для ячейки​

Если вы хотите указать заблокированные ячейки в наборе данных, используйте свойство locked ячейки и установите его в true:

const dataset = [
    { cell: "a1", value: "Country", locked: true }, //locks a cell
    { cell: "b1", value: "Product", locked: true },   

    { cell: "a2", value: "Ecuador" },
    { cell: "b2", value: "Banana" },

    { cell: "a3", value: "Belarus" },
    { cell: "b3", value: "Apple" },
    // more cells
];

Ознакомьтесь с полным списком доступных свойств ячеек в справочнике API.

Заблокированное состояние является частью данных таблицы. Оно включается в объект, возвращаемый методом serialize(), даже если заблокированная ячейка пуста, и сохраняется при экспорте данных в файл Excel и обратном импорте.

Связанный пример: Spreadsheet. Заблокированные ячейки

Вы можете указать ссылку для ячейки прямо в наборе данных. Для этого задайте свойство link как объект и укажите необходимые настройки:

  • text - (необязательно) текст ссылки
  • href - (обязательно) URL-адрес, определяющий назначение ссылки

Вот как это выглядит в наборе данных:

const dataset = [
    { cell: "a1", value: "Country"}, //locks a cell
    { cell: "b1", value: "Product"},   

    { cell: "a2", value: "Ecuador"},
    { 
        cell: "b2", 
        value: "Banana", 
        link:{
            href:"http://localhost:8080/"
        } 
    },
    // more cells
];
Примечание

Обратите внимание, что не следует использовать свойство value объекта cell и свойство text объекта link одновременно, поскольку они являются взаимоисключающими.

Связанный пример: Spreadsheet. Импорт и экспорт в JSON

Загрузка из внешнего источника​

Загрузка данных JSON​

По умолчанию Spreadsheet ожидает данные в формате JSON. Чтобы загрузить данные из внешнего источника, используйте метод load(). Он принимает URL-адрес файла с данными в качестве параметра:

var spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.load("../common/data.json");

Связанный пример: Spreadsheet. Загрузка данных

К сведению

Если вы хотите предоставить пользователям возможность импортировать JSON-файл в таблицу через Проводник файлов, прочитайте раздел Загрузка JSON-файлов.

Загрузка данных CSV​

Вы также можете загружать данные в формате CSV. Для этого нужно вызвать метод load() и передать название формата ("csv") вторым параметром:

var spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.load("../common/data.csv", "csv");

Связанный пример: Spreadsheet. Загрузка CSV

Загрузка файла Excel (.xlsx)​

Вы можете загрузить файл в формате Excel с расширением .xlsx в таблицу. В пользовательском интерфейсе есть соответствующие элементы управления на панели инструментов и в меню:

  • Меню: Файл -> Импорт как..-> Microsoft Excel(.xlsx)

Меню «Файл» DHTMLX Spreadsheet с параметром «Импорт как» для файлов Microsoft Excel XLSX

  • Панель инструментов: Импорт -> Microsoft Excel(.xlsx)

Панель инструментов DHTMLX Spreadsheet с кнопкой «Импорт» для файлов Microsoft Excel XLSX

Как импортировать данные​

Примечание

Обратите внимание, что функция импорта не работает в Internet Explorer.

DHTMLX Spreadsheet использует библиотеку на основе WebAssembly Excel2Json для импорта данных из Excel. Чтобы загрузить данные Excel в Spreadsheet, необходимо:

  • установить библиотеку Excel2Json
  • указать параметр importModulePath в конфигурации Spreadsheet и задать путь к файлу worker.js одним из двух способов:
    • указав локальный путь к файлу на вашем компьютере, например: "../libs/excel2json/1.0/worker.js"
    • указав ссылку на файл из CDN: "https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"
var spreadsheet = new dhx.Spreadsheet(document.body, {          
    importModulePath: "../libs/excel2json/1.0/worker.js"
});

Связанный пример: Spreadsheet. Настраиваемый путь импорта/экспорта

Чтобы загрузить данные из файла Excel, передайте строку с типом расширения ("xlsx") в качестве второго параметра метода load():

// .xlsx only
spreadsheet.load("../common/data.xlsx", "xlsx");
Примечание

Обратите внимание, что компонент поддерживает импорт только из файлов Excel с расширением .xlsx.

Наряду со значениями ячеек импорт восстанавливает стили ячеек, числовые форматы, объединённые ячейки, ссылки, списки проверки данных (в виде выпадающих редакторов) и заблокированное состояние ячеек.

Связанный пример: Spreadsheet. Импорт Xlsx

При необходимости вы также можете экспортировать данные из таблицы в файл Excel.

Обработка кода после загрузки​

Компонент выполняет AJAX-запрос и ожидает, что удалённый URL предоставит корректные данные. Загрузка данных асинхронна, поэтому любой код, выполняемый после загрузки, необходимо оборачивать в промис:

spreadsheet.load("/some/data").then(function(){
   // do something
});

Загрузка из локального источника​

Чтобы загрузить данные из локального источника, используйте метод parse(). Передайте подготовленный набор данных в качестве параметра этого метода:

const spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.parse(data);

Связанный пример: Spreadsheet. Настраиваемое количество ячеек

Подробнее о загрузке нескольких листов в таблицу см. в статье Работа с листами.

Сохранение и восстановление состояния​

Чтобы сохранить текущее состояние таблицы, используйте метод serialize(). Он преобразует таблицу в JSON-объект с атрибутами sheets, styles и formats. Помимо значений ячеек, сохранённое состояние включает применённые стили и числовые форматы, объединённые ячейки, зафиксированные столбцы и строки, заблокированные ячейки, а также пользовательские размеры и видимость столбцов и строк.

// saving state of the spreadsheet1
var state = spreadsheet1.serialize();

Затем вы можете разобрать данные, хранящиеся в сохранённом массиве состояния, в другую таблицу. Например:

// creating a new spreadsheet
var spreadsheet2 = new dhx.Spreadsheet(document.body);
// parsing the state of the spreadsheet1 into spreadsheet2
spreadsheet2.parse(state);

Экспорт данных​

Экспорт в Excel​

DHTMLX Spreadsheet может экспортировать данные из таблицы в файл Excel. В пользовательском интерфейсе есть соответствующие элементы управления на панели инструментов и в меню:

  • Меню: Файл -> Скачать как..-> Microsoft Excel(.xlsx)

Меню «Фа�йл» DHTMLX Spreadsheet с параметром «Скачать как» для экспорта в Microsoft Excel XLSX

  • Панель инструментов: Экспорт -> Microsoft Excel(.xlsx)

Панель инструментов DHTMLX Spreadsheet с кнопкой «Экспорт» для сохранения в Microsoft Excel XLSX

Как экспортировать данные​

Примечание

Обратите внимание, что функция экспорта не работает в Internet Explorer.

Библиотека использует библиотеку на основе WebAssembly Json2Excel для экспорта данных в Excel. Экспорт обрабатывается в файле worker.js библиотеки Json2Excel (ссылка по умолчанию: https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx). Вы можете использовать публичный сервер экспорта или локальный сервер экспорта. Для экспорта файлов необходимо:

  • указать параметр exportModulePath в конфигурации Spreadsheet и задать путь к файлу worker.js:
    • если вы используете публичный сервер экспорта, вам не нужно указывать ссылку на него, так как он используется по умолчанию
    • если вы используете собственный сервер экспорта, необходимо:
      • установить библиотеку Json2Excel
      • использовать "../libs/json2excel/x.x/worker.js?vx" для конкретной версии (замените x.x на версию, развёрнутую на вашем сервере)
var spreadsheet = new dhx.Spreadsheet(document.body, {          
    exportModulePath: "../libs/json2excel/x.x/worker.js?vx" // the path to the export module, if a local export server is used
});

Связанный пример: Spreadsheet. Настраиваемый путь импорта/экспорта

После настройки необходимых источников вы можете использовать соответствующий метод API xlsx() объекта Export для экспорта данных компонента:

spreadsheet.export.xlsx();

Связанный пример: Spreadsheet. Экспорт Xlsx

Помимо значений ячеек, экспортированный файл сохраняет применённые к ячейкам стили, числовые форматы, объединённые ячейки, зафиксированные столбцы и строки, добавленные в ячейки ссылки, выпадающие редакторы (в виде проверки данных Excel) и заблокированное состояние ячеек. Всё это восстанавливается при обратном импорте файла в Spreadsheet.

Примечание

Обратите внимание, что компонент поддерживает экспорт только в файлы Excel с расширением .xlsx.

Как задать пользовательское имя для экспортируемого файла​

По умолчанию имя экспортируемого файла — "data". Вы можете указать собственное имя для экспортируемого файла. Для этого нужно передать пользовательское имя в качестве параметра метода xlsx():

spreadsheet.export.xlsx("MyData");

Связанный пример: Spreadsheet. Экспорт Xlsx

Ознакомьтесь с шагами по импорту данных из файла Excel в Spreadsheet.

Экспорт в JSON​

Начиная с версии v4.3 библиотека также может экспортировать данные из таблицы в файл JSON. Для этого используйте метод json() объекта Export:

spreadsheet.export.json();

Связанный пример: Spreadsheet. Экспорт/импорт JSON

Need more help?Contact Support