纯前端导出,导入excel并且修改excel样式

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: {},
}


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值