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 = '月份订单'                //文件名称
 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就是你所需导出数据的字段名称。key的值要跟data的值一一对应的。type类型，图片就是image，适合http和https的链接形式。我这里的创建时间字段是个时间戳，所以要进行转换为日期。如果后端给你的日期格式不用调整的话，那么format函数是不用的。