предисловие
В связи с необходимостью импорта и экспорта excel на фронтенде на работе я не нашел в интернете готового плагина для импорта и экспорта excel, он относительно известен в js.xlsxБесплатная версия плагина не может изменить стиль, а профессиональная версия, которая может изменить стиль, стоит больше ножей 700. Я молча искал другие плагины и нашел его позже.xlsx-styleПлагину нужно модифицировать исходный код, что более хлопотно, поэтому после поиска кода многих больших парней в Интернете я просто инкапсулировал его на основе xlsx и в стиле xlsx (большое спасибо коду для самоотверженная самоотверженность больших парней) Когда смешиваются китайский, английский и цифры, автоматическая ширина столбца устанавливается в соответствии с длиной символа. Лично я считаю, что это самое полезное, хи-хи.
Функция
- Поддерживает экспорт файлов Excel и может устанавливать ширину столбца, границу, шрифт, цвет шрифта, размер шрифта, выравнивание, цвет фона и другие стили.
- Он поддерживает импорт файлов Excel и генерирует данные json.Учитывая производительность клиентского компьютера, при экспорте большого объема данных рекомендуется разбивать данные на несколько файлов для экспорта.
demo
Installation
With npm or yarn
yarn add pikaz-excel-js
npm i -S pikaz-excel-js
Убедитесь, что версия vue выше 2.0.
For Vue-cli
Export:
Typical use:
<excel-export :sheet="sheet">
<div>导出</div>
</excel-export>
.vue file:
import {ExcelExport} from 'pikaz-excel-js'
...
export default {
components: {
ExcelExport,
},
data () {
return {
sheet:[
[
title:"水果的味道",
tHeader:["荔枝","柠檬"],
table:[{litchi:"甜",lemon:"酸"}],
keys:["litchi","lemon"],
sheetName:"水果的味道",
]
]
}
}
...
Attributes:
| параметр | иллюстрировать | Типы | необязательное значение | По умолчанию |
|---|---|---|---|---|
| bookType | формат файла | string | xlsx/xls | xlsx |
| filename | имя файла | string | -- | excel |
| sheet | Табличные данные, конфигурация каждого объекта табличных данных подробно описана ниже.конфигурация стола | array | -- | -- |
| before-start | Хук перед обработкой данных, параметры - формат экспортируемого файла, имя файла, данные таблицы, если возвращает false, экспорт будет остановлен | function(bookType, filename, sheet) | -- | -- |
| before-export | Хук перед экспортом файла, параметры - формат экспортируемого файла, имя файла, поток файла блоба, если он возвращает false, экспорт останавливается | function(bookType, filename, sheet) | -- | -- |
| on-error | Хук, который не удалось экспортировать, параметр является сообщением об ошибке | function(err) | -- | -- |
Конфигурация параметров формы
| параметр | иллюстрировать | Типы | необязательное значение | По умолчанию |
|---|---|---|---|---|
| title | Заголовок таблицы должен использоваться с заголовком таблицы или многоуровневым заголовком, не требуется | string | -- | -- |
| tHeader | заголовок, необязательный | array | -- | -- |
| multiHeader | Многоуровневые заголовки, то есть массив содержит несколько массивов заголовков, необязательные элементы | array | -- | -- |
| table | Табличные данные | array | -- | -- |
| merges | Объединенные ячейки, объединенные заголовки и избыточные элементы данных в таблице заполняются пустыми строками, несущественными элементами. | array | -- | -- |
| keys | Имя ключа данных, которое должно соответствовать порядку содержимого заголовка. | array | -- | -- |
| colWidth | Ширина столбца. Если не передать, ширина столбца будет адаптивной. Рекомендуется задавать ширину столбца при большом объеме данных. | array | -- | -- |
| sheetName | имя формы | string | -- | sheet |
| globalStyle | Глобальный стиль таблицы, конкретные параметры см. нижеглобальный стиль таблицы | object | -- | глобальный стиль таблицы |
| cellStyle | Стиль ячейки, настройте определенные параметры для каждого объекта ячейки, см. нижесотовый стиль | array | -- | -- |
глобальный стиль таблицы
| параметр | Имя свойства | иллюстрировать | Типы | необязательное значение | По умолчанию |
| border | top | Формат: {style:'thin',color:{rgb: "000000"}} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} |
| right | Формат: {style:'thin',color:{rgb: "000000"}} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} | |
| bottom | Формат: {style:'thin',color:{rgb: "000000"}} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} | |
| left | Формат: {style:'thin',color:{rgb: "000000"}} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} | |
| font | name | шрифт | string | Сонг/Хей/Тахома и т.д. | Таймс Нью Роман |
| sz | размер шрифта | number | -- | 12 | |
| color | Цвет шрифта, формат, например: {rgb: "000000"} | object | -- | { rgb: "000000" } | |
| bold | Это смелый | boolean | true/false | false | |
| italic | курсив | boolean | true/false | false | |
| underline | Есть ли подчеркивание | boolean | true/false | false | |
| shadow | Есть ли тень | boolean | true/false | false | |
| fill | fgColor | фоновый цвет | { rgb: "ffffff" } | -- | { rgb: "ffffff" } |
| alignment | horizontal | горизонтальное выравнивание | string | bottom/center/top | center |
| vertical | вертикальное выравнивание | string | bottom/center/top | center | |
| wrapText | Переносится ли текст | boolean | true/false | false |
сотовый стиль
| параметр | иллюстрировать | Типы | необязательное значение | По умолчанию |
| cell | имя ячейки, например A1 | string | -- | -- |
другие свойства иглобальный стиль таблицыНастроить таким же образом
Import:
Typical use:
<excel-import :on-success="onSuccess">
<div>导入</div>
</excel-import>
.vue file:
import {ExcelImport} from 'pikaz-excel-js'
...
export default {
components: {
ExcelImport,
},
methods:{
onSuccess(data, file){
console.log(data)
}
}
...
Attributes:
| параметр | иллюстрировать | Типы | необязательное значение | По умолчанию |
|---|---|---|---|---|
| sheetNames | Имя запрашиваемой таблицы, например ['информация о плагине'] | Array | -- | -- |
| before-import | Хук перед импортом файла, файл параметров является файлом импорта | function(file) | -- | -- |
| on-progress | Хуки для импорта файлов | function(event,file) | -- | -- |
| on-change | Перехватчик при изменении состояния файла, вызывается при импорте файла, успешном импорте и сбое импорта | function(file) | -- | -- |
| on-success | Хук для успешного импорта файла, ответ параметра - сгенерированные данные json | function(response, file) | -- | -- |
| on-error | Ловушка для ошибки импорта файла, ошибка параметра является сообщением об ошибке | function(error, file) | -- | -- |
Справочная статья
у-у-у. Краткое описание.com/afraid/31534691 о…
Блог Woohoo.cn на.com/invisible en/afraid…
адрес проекта:GitHub.com/Pickup-18/Пикап…
наконец
После того, как я сам написал документ, я обнаружил, что документ действительно сложно написать, и я никогда не буду жаловаться на чужие документы в будущем, ха-ха.