vue导出excel

杨咩咩yang

已于 2023-05-05 10:18:46 修改

阅读量194

点赞数

文章标签： vue.js 前端 vue-json-excel

于 2023-04-26 09:47:55 首次发布

本文链接：https://blog.youkuaiyun.com/yang1393214887/article/details/130379149

版权

该文章介绍了如何在Vue项目中利用vue-json-excel插件从后台获取JSON数据并导出为Excel文件，同时处理数字被误识别为日期的问题，通过在数字前添加空格以及自定义回调函数来定制故障信息的显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台传入前端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 '&nbsp;'+ 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>