1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/wangerzi-layui-excel

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
样式设置相关函数.md 17 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 28.11.2024 11:53 ed2126c

Функции, связанные с настройкой стиля

Настройка стиля включает в себя: установку границ для таблиц, добавление цвета фона, добавление изображений, изменение размера шрифта, выравнивание текста по центру, настройку высоты строк и ширины столбцов, объединение ячеек и другие функции. Были разработаны такие вспомогательные методы, как setExportCellStyle для добавления стиля, setRoundBorder для настройки границ и makeRowConf для настройки высоты строки, makeColConf для настройки ширины столбца и makeMergeConf для объединения.

Параметры конфигурации setExportCellStyle

Вспомогательный метод для установки свойств ячеек на уровне листа. Данные обрабатываются функцией filter перед использованием. Необходимо обратить внимание на то, что первый параметр должен быть обработан функцией filter, а также на то, чтобы порядок и полнота ключа были соблюдены. Если четвёртый параметр (функция обратного вызова) передан, данные ячейки будут основаны на возвращаемом значении функции обратного вызова.

Параметр Описание Значение по умолчанию
data Данные на уровне листа undefined
range Диапазон строк, например, «A1:C12», который представляет начальную позицию A1 и конечную позицию C12. В настоящее время не поддерживает другие форматы, не рекомендуется использовать самодельные форматы, такие как AB, 12 Диапазон от левого верхнего угла до правого нижнего угла
config Свойства ячеек, которые будут установлены массово. Если функция обратного вызова не возвращает значение, стиль будет объединён. Если возвращается значение, оно будет использоваться в качестве основы undefined
filter Необязательный параметр. Функция обратного вызова, которая активируется при передаче функции и возвращает новое значение (может использоваться для фильтрации, замены правил стиля и других операций) undefined

Список параметров функции filter

Этот параметр является необязательным. Если он не передан, правила будут применены напрямую.

Параметр Описание
cell Исходные данные ячейки
newCell Автоматически сгенерированные данные ячейки после применения массовых настроек стиля (объединённые)
row Данные строки
config Переданные настройки
currentCol Индекс текущего столбца
fieldKey Текущий ключ поля

Пример использования (дополнительные примеры можно найти в index.js)

Если вы хотите динамически передать диапазон A1:C{длина данных}, вы можете изменить второй параметр на 'A1:C' + data.length.

// 1. Пример данных после сортировки (фильтрация опущена)
var data = [
    { username: '520',sex: '', city: 'J', 'score': 100, 'start': '2019-03-11' },
    { username: '520',sex: '', city: 'X', 'score': 100, 'start': '2019-03-11' },
    { username: '520',sex: '', city: '上海', 'score': 100, 'start': '2019-03-11' }
];
// 2. Вызов функции настройки стиля, передача диапазона, поддержка обратного вызова
excel.setExportCellStyle(data, 'A1:C3', {
    s: {
        fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FF0000" } },
        alignment: {
            horizontal: 'center',
            vertical: 'center'
        }
    }
}, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
    // Параметры обратного вызова: cell: исходные данные, newCell: автоматически сгенерированный стиль после массовой настройки, row: данные строки, config: переданные настройки, currentRow: индекс текущей строки, currentCol: индекс текущего столбца, fieldKey: текущий ключ поля
    return ((currentRow + currentCol) % 2 === 0) ? newCell : cell;// Раскраска через строку и столбец
});
// 3. Экспорт данных
excel.exportExcel(data, 'Массовая настройка стиля.xlsx', 'xlsx');

Настройка параметров roundBorder

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

Параметр Описание Значение по умолчанию
data Лист данных []
range Диапазон строк, такой как A1:C12, по умолчанию от верхнего левого угла до нижнего правого угла «A1:C12»
config Информация о свойствах границы (три свойства диагонали помещаются в left/right/top/bottom) {top: {xxx}, bottom: {}, left: {}, right: {}}

Пример вызова

LAY_EXCEL.setRoundBorder(list, 'A1:C2', {
    top: {style: 'thick', color: {rgb: 'FFFF0000'}},
    bottom: {style: 'thick', color: {rgb: 'FFFF0000'}},
    left: {style: 'thick', color: {rgb: 'FFFF0000'}},
    right: {style: 'thick', color: {rgb: 'FFFF0000'}}
});

makeMergeConfig

Функция помощника для создания конфигурации слияния для таблицы. Обратите внимание, что её необходимо передать в opt.extend['!merge'] exportExcel.

Параметр Описание Значение по умолчанию
origin Двумерный массив undefined

Пример вызова

Следующий код объединяет строки от A1 до E1 и строки от A2 до D4. Если есть динамическое требование к объединению столбцов, пожалуйста, используйте цикл JS для генерации параметров и передачи их.

var mergeConf = excel.makeMergeConfig([
    ['A1', 'E1'],
    ['A2', 'D4']
]);
excel.exportExcel({
    sheet1: data
}, 'Тестирование экспорта сложной таблицы заголовков.xlsx', 'xlsx', {
    extend: {
        // Необходимо передать сгенерированную конфигурацию
        '!merges': mergeConf
    }
});

makeColConfig

Функция помощника для генерации конфигурации ширины столбца. Возвращаемое значение должно быть помещено в opt.extend['!cols']. | data | Один объект, key объекта представляет столбец (например: ABCDE), value представляет ширину | null | | defaultNum | Ширина по умолчанию для ячеек, которые не были заданы в процессе рендеринга | 60 |

Пример использования

key представляет столбец, value представляет ширину, конфигурация берёт значение по умолчанию, если ширина столбца между минимальным и максимальным столбцами не определена, обратите особое внимание на то, что это должно быть помещено в opt.extend['!cols'] Здесь я хотел бы выразить свою благодарность коллеге из группы «Маленький шар🦏», который тщательно обнаружил ошибку в единицах измерения высоты строки и ширины столбца.

// Это означает, что ширина столбцов A составляет 40, B — 80 (установлена ​​ширина столбца по умолчанию), C — 120 пикселей, а D, E, F и т. д. не определены (ширина таблицы по умолчанию, не 80), единица измерения — фунт
var colConf = excel.makeColConfig({
    'A': 40,
    'C': 120
}, 80);
excel.exportExcel({
    sheet1: data
}, 'Тестирование экспорта сложной таблицы заголовков.xlsx', 'xlsx', {
    extend: {
        '!cols': colConf
    }
});

Параметры конфигурации makeRowConfig

Вспомогательный метод: создание конфигурации ширины столбцов, результаты должны быть размещены в opt.extend['!rows']

Параметр Описание По умолчанию
data Один объект, ключ объекта представляет строку (например, 1234), значение представляет высоту null
defaultNum Высота по умолчанию для ячеек, которые не были указаны в процессе рендеринга 60

Пример использования

Ключ представляет строку, значение представляет высоту, конфигурация принимает значение по умолчанию, если высота строки между минимальной и максимальной строками не определена. Обратите особое внимание на необходимость размещения в opt.extend['!rows'].

// Означает, что высота строк 1 составляет 40, высота строк 2 — 80 (была установлена ​​ширина столбца по умолчанию), высота строк 3 — 120 пикселей, высота строк 4/5/6/7 и т.д. не определена (высота таблицы по умолчанию не равна 80). Приблизительно 1 соответствует 1,1 фунта, контролируется нижним уровнем и не изменяется при упаковке верхнего уровня.
var rowConf = excel.makeRowConfig({
    1: 40,
    3: 120
}, 80);
excel.exportExcel({
    sheet1: data
}, 'Тестирование экспорта сложной таблицы заголовков.xlsx', 'xlsx', {
    extend: {
        '!rows': rowConf
    }
});

imageUrlToBase64 Параметры конфигурации

Вспомогательный метод: загрузка изображения и преобразование его в base64, результаты должны быть помещены в opt.extend['!images']

Параметр Описание По умолчанию
url Адрес изображения, обратите внимание на проблемы с междоменными запросами ""
ext Расширение файла, по умолчанию используется расширение файла, полученное путём анализа URL-адреса, поддерживает URL-адрес с ? и # ""

Пример использования

Обратите внимание, что функция splitPosition(pos: string) используется для быстрого создания конфигурации положения ячейки.


// Этот фрагмент является имитацией генерации данных, структура: [{id: "", имя пользователя: "", город: "", изображение: ""}]
const data = new Array(5).fill({}).map((_, idx) => {
    return {
        id: idx,
        имя пользователя: `name${idx}`,
        город: `город${idx}`,
        изображение:
        "https://img0.baidu.com/it/u=1588905690,3738625613&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500",
    };
});
// Этот код является примером асинхронного запроса изображения. Если вы можете получить изображение base64 самостоятельно, этот шаг можно пропустить.
const asyncConcurrencyTask = [];
for (let index = 0; index < data.length; index++) {
    asyncConcurrencyTask.push(
        new Promise((resolve, reject) => {
            excel
                .imageUrlToBase64(data[index].изображение, "jpg")
                .then((val) => {
                pictures.push(val.split(",")[1]);
                // Обратите внимание: если вы не хотите, чтобы фактический адрес появлялся в таблице, вы можете удалить его в цикле.
                data[index].изображение = "";
                resolve();
                });
        })
    );
}
await Promise.allSettled(asyncConcurrencyTask);
// Ниже приводится часть экспорта
excel.exportExcel({
    sheet1: data
}, 'Тестирование экспорта сложных заголовков таблиц.xlsx', 'xlsx', {
    extend: {
        sheet1: {
            "!images": [
            // Необходимо установить положение каждого изображения, которое можно динамически генерировать в соответствии с потребностями (объединить строку), здесь только для демонстрации использования
            {
                name: "image1.jpg",
                данные: pictures[0],
                opts: { base64: true },
                position: {
                type: "twoCellAnchor",
                attrs: { editAs: "oneCell" },
                from: excel.splitPosition("D2"),
                to: excel.splitPosition("E3"),
                },
            },
            {
                name: "image2.jpg",
                данные: pictures[1],
                opts: { base64: true },
                position: {
                type: "twoCellAnchor",
                attrs: { editAs: "oneCell" },
                from: excel.splitPosition("D3"),
                to: excel.splitPosition("E4"),
                },
            }
            ]
        }
    }
});

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/wangerzi-layui-excel.git
git@api.gitlife.ru:oschina-mirror/wangerzi-layui-excel.git
oschina-mirror
wangerzi-layui-excel
wangerzi-layui-excel
master