代码拉取完成，页面将自动刷新
同步操作将从 牛雪瑞/pikaz-excel-js 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
这个项目是在工作中并没有找到一个开箱即用的excel导入导出插件，js里比较知名的xlsx插件免费版没办法修改样式，而xlsx-style插件需要修改源码，都比较麻烦，所以在xlsx和xlsx-style的基础上做了简单的封装，做到开箱即用，降低使用成本。
yarn add pikaz-excel-js
npm i -S pikaz-excel-js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pikaz-excel-js"></script>
或者
<script type="text/javascript" src="https://unpkg.com/pikaz-excel-js"></script>
请确保vue版本在2.0以上
<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:"水果的味道"
}
]
}
}
...
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| bookType | 文件格式 | string | xlsx/xls | xlsx |
| filename | 文件名称 | string | -- | excel |
| manual | 手动导出模式，设置为true时，取消点击导出，并可调用pikaExportExcel方法完成导出 | boolean | true/false | false |
| sheet | 表格数据，每个表格数据对象配置具体看下方表格配置 | array | -- | -- |
| before-start | 处理数据之前的钩子，参数为导出的文件格式，文件名，表格数据，若返回 false则停止导出 | function(bookType, filename, sheet) | -- | -- |
| before-export | 导出文件之前的钩子，参数为导出的文件格式，文件名，blob文件流，若返回 false则停止导出 | function(bookType, filename, sheet) | -- | -- |
| on-error | 导出失败的钩子，参数为错误信息 | function(err) | -- | -- |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 表格标题，自动设置合并，非必须项 | string | -- | -- |
| tHeader | 表头，非必须项 | array | -- | -- |
| multiHeader | 多级表头,即一个数组中包含多个表头数组，非必须项 | array | -- | -- |
| table | 表格数据，如果无数据，设置为空字符""，避免使用null或undefined | array | -- | -- |
| merges | 合并单元格，合并的表头和表格多余数据项以空字符串填充，非必须项 | array | -- | -- |
| keys | 数据键名，需与表头内容顺序对应 | array | -- | -- |
| colWidth | 列宽，若不传，则列宽自适应（自动列宽时数据类型必须为string，如有其他数据类型，请手动设置列宽），数据量多时推荐设置列宽 | 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 | 宋体/黑体/Tahoma等 | 宋体 |
| 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 | left/center/right | center |
| vertical | 垂直对齐方式 | string | bottom/center/top | center | |
| wrapText | 文字是否换行 | boolean | true/false | false |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| cell | 单元格名称，如A1 | string | -- | -- |
其他属性与表格全局样式设置方式一致
| 方法名 | 说明 | 参数 |
|---|---|---|
| pikaExportExcel | 导出函数 | -- |
<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)
}
}
...
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| sheetNames | 需要导入表的表名，如['插件信息'] | Array | -- | -- |
| removeBlankspace | 是否移除数据中字符串的空格 | Boolean | true/false | false |
| removeSpecialchar | 是否移除不同版本及环境下excel数据中出现的特殊不可见字符，如u202D等,使用此功能，返回的数据将被转化为字符串 | Boolean | true/false | true |
| before-import | 文件导入前的钩子，参数file为导入文件 | function(file) | -- | -- |
| on-progress | 文件导入时的钩子 | function(event,file) | -- | -- |
| on-change | 文件状态改变时的钩子，导入文件、导入成功和导入失败时都会被调用 | function(file) | -- | -- |
| on-success | 文件导入成功的钩子，参数response为生成的json数据 | function(response, file) | -- | -- |
| on-error | 文件导入失败的钩子，参数error为错误信息 | function(error, file) | -- | -- |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。