Быстрый старт

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

Попробуйте: экспортируйте «Hello World» одной командой

В http://excel.wj2015.com нажмите F12, чтобы открыть консоль отладки. Затем введите следующую команду и загрузите её. После загрузки откройте файл и проверьте результат. Если всё сделано правильно, вы увидите результат.

LAY_EXCEL.exportExcel([['Hello', 'World', '!'], 'hello.xlsx', 'xlsx')

PS: Это основная функция экспорта. Первый параметр — это двумерный массив, второй параметр — имя файла экспорта, третий параметр — тип файла. Разве это не просто? Те, у кого есть базовые знания JS, поймут это с первого взгляда! Далее мы продолжим объяснять, как объединить это с AJAX для экспорта данных, полученных из серверной части.

Шаг 1: получение данных для экспорта из серверной части

Типичный сценарий экспорта заключается в том, что серверная часть предоставляет интерфейс для получения данных. Затем клиент запрашивает данные через интерфейс и экспортирует их на основе параметров интерфейса. Таким образом, вам нужно использовать $.ajax() для асинхронного запроса данных интерфейса.

$.ajax({
    url: '/path/to/get/data',
    dataType: 'json',
    success: function(res) {
        // 假如返回的 res.data 是需要导出的列表数据
        console.log(res.data);// [{name: 'wang', age: 18}, {name: 'layui', age: 3}]
    }
});

Шаг 2: загрузка исходного кода и внедрение плагина

Если вы используете layuiadmin, использование этого плагина аналогично использованию других плагинов. Пожалуйста, обратитесь к документации для конкретных инструкций по внедрению (PS: удобно включить скрипт в нужном месте).

Для проекта Layui, который не использует layuiadmin, инициализация плагина выглядит следующим образом:

layui.config({
	base: 'layui_exts/',
}).extend({
    excel: 'excel',
});

PS: Теперь поддерживается способ загрузки плагина путём прямого импорта файлов JS. Затем вы можете вызвать соответствующие функции через глобальную переменную LAY_EXCEL. Для тех, кто не знаком с LAYUI или не знает, как загрузить плагин, вы можете включить его в HTML-файл с помощью тега script, например:

<!--Загрузка плагина-->
<script src="../../layui_exts/excel.js"></script>
<!--Непосредственный вызов функции-->
<script>
    LAY_EXCEL.exportExcel([[1, 2, 3]], 'Таблица экспорта.xlsx', 'xlsx')
</script>

PS: Также поддерживается импорт через npm. Если вы используете фреймворк Vue / React для переднего плана, вы можете использовать следующий метод импорта. Вот пример использования Vue: lay-excel-vue

$ npm i lay-excel

Затем импортируйте и вызовите функцию экспорта:

import LAY_EXCEL from 'lay-excel';
LAY_EXCEL.exportExcel([[1, 2, 3]], 'Таблица экспорта.xlsx', 'xlsx')

！！！Примечание: ни в коем случае не используйте адрес в демонстрации функций в качестве CDN. Автор связался с layuicdn, чтобы предоставить профессиональные бесплатные услуги CDN. Версия может быть не последней. Если вам нужна последняя версия CDN, пожалуйста, свяжитесь со мной в группе.

v1.6.5 Адрес CDN: https://www.layuicdn.com/extend/excel/1.6.5/layui_exts/excel.min.js

Шаг 3: вручную добавьте заголовок таблицы и вызовите внутреннюю функцию экспорта excel

Для проектов, отличных от layui, просто используйте $.ajax и LAY_EXCEL для выполнения асинхронных операций и экспорта.

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

layui.use(['jquery', 'excel', 'layer'], function() {
    var $ = layui.jquery;
    var excel = layui.excel;
    $.ajax({
        url: '/path/to/get/data',
        dataType: 'json',
        success: function(res) {
            // 假如返回的 res.data 是需要导出的列表数据
            console.log(res.data);// [{name: 'wang', age: 18, sex: '男'}, {name: 'layui', age: 3, sex: '女'}]
            // 1. Добавить заголовок таблицы в начало массива
            res.data.unshift({name: 'Имя пользователя',sex: 'Пол', age: 'Возраст'});
            // 2. Если необходимо изменить порядок, выполните функцию сортировки
            var data = excel.filterExportData(res.data, [
                'name',
                'sex',
                'age',
            ]);
            // 3. Выполните функцию экспорта, и система предложит всплывающее окно
            excel.exportExcel({
                sheet1: data
            }, 'Данные интерфейса экспорта.xlsx', 'xlsx');
        }
    });
});