vue导出excel

后台传入前端json对象，前端使用vue-json-excel插件导出为excel。表头可筛选。

问题解决方案：数字字符如果被识别为日期等，可在前面加空格。

安装：

npm install vue-json-excel

引入：

<script>
import JsonExcel from "vue-json-excel"

export default {
  name: "outputFault",
  // 注册组件
  components: {
    JsonExcel
  },
//......
//......
</script>

使用：

<template>里的引入方式

<json-excel
   :data="faultData"
   :fields="dataCheckTitle"
    type="xls"
    name="表格.xls"
    :stringifyLongNum="stringifyLongNum"
 >
     <el-button type="primary" @click="checkGroupeToTitle">下载EXCEL</el-button>
</json-excel>

定义的data(){}

data(){
return {
      faultData:[],
      dataCheckTitle:{},
      stringifyLongNum:true,//解决数字精度丢失问题
      dataTitle:{
        "故障时间": "faultTime",
        "故障现场": "place",
        "故障描述": "faultDesc",
        "故障类型": "type",
        "故障原因": "reason",
        "处理过程": "result",
        "故障编码": {
          field: "faultCode",
          callback: value => {
            return ' '+ value//解决把编码识别为日期的问题
          }
        },
        "状态": {
          field:"status",
          callback: value => {
            switch (value){
              case 0:
                value = "未解决";
                return;
              case 1:
                return value="已解决";
              case 2:
                return value="已关闭";
            }
          }
        }
      },
//......其他代码。。。。。。
}

完成页面代码示例：

<template>
  <system-dialog
    :title="outputDialog.title"
    :visible="outputDialog.visible"
    :width="outputDialog.width"
    :height="outputDialog.height"
    @onClose="onCloseOutput"
    @onConfirm="onConfirmOutput"
  >
    <div slot="content">
      <el-row>
        <el-col :span="4">导出列</el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="checkGroup">
            <el-checkbox
              v-for="(item, key) in dataTitle"
              :label="key"
              :key="key"
              :disabled="key === '故障描述'"
            >{{ key }}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" :offset="4">
          <json-excel
            :data="faultData"
            :fields="dataCheckTitle"
            type="xls"
            name="故障列表.xls"
            :stringifyLongNum="stringifyLongNum"
          >
            <el-button type="primary" @click="checkGroupeToTitle">下载EXCEL</el-button>
          </json-excel>
        </el-col>
      </el-row>
    </div>
  </system-dialog>
</template>

<script>
import JsonExcel from "vue-json-excel"
import SystemDialog from "@/components/system/SystemDialog.vue"
import faultApi from "@/api/fault.js"

export default {
  name: "outputFault",
  // 注册组件
  components: {
    SystemDialog,
    JsonExcel
  },
  // 父组件传递给子组件的数据
  props:[
    "outputDialogVisible",
    "searchModel",
    "startEndTime"
  ],
  data(){
    return {
      faultData:[],
      dataCheckTitle:{},
      stringifyLongNum:true,//解决数字精度丢失问题
      dataTitle:{
        "故障时间": "faultTime",
        "故障现场": "place",
        "故障描述": "faultDesc",
        "故障类型": "type",
        "故障原因": "reason",
        "处理过程": "result",
        "故障编码": {
          field: "faultCode",
          callback: value => {
            return '&nbsp;'+ value //解决把编码识别为日期的问题
          }
        },
        "状态": {
          field:"status",
          callback: value => {
            switch (value){
              case 0:
                value = "未解决";
                return;
              case 1:
                return value="已解决";
              case 2:
                return value="已关闭";
            }
          }
        }
      },
      //可加可不加
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ],
      searchModel1:{
        startTime:'',
        endTime:'',
      },
      outputModel:{},
      //时间范围
      outputDate:'',
      outputDialog: {
        title: "故障导出",// 窗口标题 新增和修改共用，所以打开时再赋值
        visible: false, // 是否显示
        width: 700,// 窗口宽度
        height: 300// 窗口高度
      },
      // 多选框
      checkGroup:["故障时间","故障现场","故障描述"],
      // groupOption:["故障时间","故障现场","故障编码","故障描述","故障类型","故障原因","处理过程","状态"],
    }
  },
  methods:{
    async search(){
      if(this.startEndTime.length>0){
        this.searchModel.startTime = this.startEndTime[0]
        this.searchModel.endTime = this.startEndTime[1]
      }
      let res = await faultApi.getFaultListByDate(this.searchModel)
      if(res.success){
        this.faultData = res.data
      }
    },
    checkGroupeToTitle(){
      this.checkGroup.forEach(item => {
        this.dataCheckTitle[item]=this.dataTitle[item]
      })
    },
    onCloseOutput(){
      // 关闭窗口
      this.outputDialog.visible = false
      // 执行父组件方法
      this.$emit('updateOutput')
      // 清空参数
      this.outputDate=''
    },
    onConfirmOutput(){
      // 关闭窗口
      this.outputDialog.visible = false
      // 执行父组件方法
      this.$emit('updateOutput')
      // 清空参数
      this.outputDate=''
    },
  },
  //监听outputDialogVisible变化
  watch: {
    outputDialogVisible: function(newVal, oldVal){
      if(newVal) {
        this.outputDialog.visible = newVal
        this.search()
      }

    }
  },
}
</script>

<style scoped>
.el-row{
  margin-bottom: 20px;
}
.el-col{
  line-height: 30px;
}
</style>