yarn add pikaz-excel-js
npm i -S pikaz-excel-js
/**html*/
<excel-export :bookType="bookType" :filename="filename" :sheet="sheet" :on-error="onError">
<div class="export-btn">点击导出</div>
</excel-export>
/**手动导出*/
/** <excel-export :bookType="bookType" :filename="filename" :sheet="sheet" :on-error="onError" :manual="true"
ref="excelExport">
</excel-export>
<div @click="exportTable">点击导出</div>**/
/**js*/
import { ExcelExport } from 'pikaz-excel-js'
import { ExcelImport } from 'pikaz-excel-js'
export default {
components: { ExcelExport,ExcelImport },
data() {
return {
/**导出的模拟数据*/
bookType: 'xlsx',
filename: 'export-demo',
sheet: [
{
title: '插件信息',
tHeader: ['作者', '语言', '插件名称', '插件用途'],
table: [{ author: 'pikaz', language: 'javascript', name: 'pikaz-excel-js', application: 'excel的导入导出' }],
keys: ['author', 'language', 'name', 'application'],
sheetName: '插件信息',
cellStyle: [
{
cell: 'A1',
font: {
sz: 14,
color: { rgb: "ffffff" },
bold: true,
},
fill: {
fgColor: { rgb: "ff7e00" },
}
}
]
},
{
title: '插件信息2',
multiHeader: [['基础信息', '', '', '详细信息'], ['作者', '语言', '插件名称', '插件用途']],
table: [{ author: 'pikaz', language: 'javascript', name: 'pikaz-excel-js', application: 'excel的导入导出' }],
keys: ['author', 'language', 'name', 'application'],
merges: ['A2:C2'],
colWidth: [40, 16, 16, 20],
sheetName: '插件信息2',
globalStyle: {
font: {
color: { rgb: "ff7e00" },
}
},
cellStyle: [
{
cell: 'A1',
font: {
name: '黑体',
sz: 14,
color: { rgb: "ffffff" },
bold: true
},
fill: {
fgColor: { rgb: "ff7e00" },
}
}
]
}
]
},
/**导入后的解析数据*/
json:''
},
methods: {
/**
* @name: 导出错误
* @param {String} err/错误信息
* @return:
*/
onError(err) {
console.log(err)
},
/**
* @name: 导入成功
* @param {Array} response/生导入数据
* @param {Object} file/导入文件
* @return:
*/
onSuccess(response, file) {
this.json = JSON.stringify(response)
},
/**
* @name: 手动导出
* @param {type}
* @return:
*/
exportTable () {
this.$refs.excelExport.pikaExportExcel()
}
},
computed: {},
watch: {},
}