vue将数据导出Excel表格;含文字、图片类型(并有类型的转换)

随着项目进度的前进,到了最后一步需要将数据导出到Excel表格内,并且数据中包含一些类型的转换,和图片类型。

正常情况下我们只需要导出文字类型,这是最简单的一种导出方式。那么现在我还有一些类型的转换和图片的导出到表格里,这该如何做?别慌,现在开源的插件有很多能够处理这种情况的,接下来我一步一步的展示,能够让你明白。

第一步:安装插件。

npm install js-table2excel

第二步:引入插件。

import table2excel from 'js-table2excel'

第三步,处理数据,导出Excel表格。

const column = [
    {
    
    
      title: '维修内容', 
      key: 'title',
      type: 'text'
    },
    {
    
    
      title: '维修图',
      key: 'fximage',
      type: 'image',
      width: 100,
      height: 100
    },{
    
    
      title:'订单创建时间',
      key:'add_time',
      type:'text'
    }
  ]
  const data = [
	{
    
    
		title: 'xiao',
		fximage: 'https://tczl168.com/233_1601887517.jpg',
		add_time: 1601887522   //时间戳
	},
	{
    
    
		title: 'xiao',
		fximage: 'https://tczl168.com/233_1601887517.jpg',
		add_time: 1601887522
	}
]
var datas = this.Format(data)
  const excelName = e+'月份订单'                //文件名称
 table2excel(column, datas, excelName)    //生成Excel表格,自动下载

Format(res){
    
    
      var list = res
      for (let index = 0; index < list.length; index++) {
    
    
        var time = list[index]["add_time"]
        var date = time * 1000;
        list[index]["add_time"] = moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
      return list;
    }

首先说明一下,title就是表格的头部说明,key就是你所需导出数据的字段名称。type类型,图片就是image,适合http和https的链接形式。我这里的创建时间字段是个时间戳,所以要进行转换为日期。
在这里插入图片描述
有问题可以下方留言~

猜你喜欢

转载自blog.csdn.net/weixin_43729943/article/details/108939521