vue中使用pikaz-excel-js实现导入导出功能

一. 安装依赖

1. 安装依赖

yarn add pikaz-excel-js
npm i -S pikaz-excel-js

2. cdn方式

<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>

  import {ExcelExport} from 'pikaz-excel-js'
  ...
  export default {
        components: {
            ExcelExport,
        },
        data () {
          return {
            sheet:[
              {
                title:"水果的味道",
                tHeader:["荔枝","柠檬"],
                table:[{litchi:"甜",lemon:"酸"}],
                keys:["litchi","lemon"],
                sheetName:"水果的味道"
              }
            ]
          }
        }
  ...

三. 导入

<excel-import :on-success="onSuccess">
   <div>导入</div>
</excel-import>
  import {ExcelImport} from 'pikaz-excel-js'
  ...
  export default {
        components: {
            ExcelImport,
        },
        methods:{
          onSuccess(data, file){
            console.log(data)
          }
        }
  ...

详细配置请参考: https://github.com/pikaz-18/pikaz-excel-js/#table-setting