vue前端导出（可导出图片）

新手遇到导出需求，我们应该这样，然后那样，然后就好了。

1. 安装所需要插件

cnpm install js-table2excel

2. 在需要导出的页面引用插件

import table2excel from 'js-table2excel' 

3. 对应的方法

//导出对应的图片
    async downLoadPhoto() {
      this.queryForm.pageSize = this.dataTotal;   //后端分页返回数据需要将所有数据返回出来
      await 接口名称({
        ...this.queryForm    //查询表单
      }).then((res) => {
        this.tableData = res.data.data;
        //添加序号信息
        this.tableData.forEach((item,index) => {
          item.index = index + 1
        })
      })
      const column = [
        {
          title: '序号',
          key: 'index',
          type: 'text',
        },
        {
          title: '名称1',
          key: 'name1',
          type: 'text',
        },
        {
          title: '名称2',
          key: 'name2',
          type: 'text',
        },
        {
          title: '名称3',
          key: 'name3',
          type: 'text',
        },
        {
          title: '图片',
          key: 'photo',
          type: 'image',
          width: 150,
          height: 150,
        },
      ]
      const tableDatas = JSON.parse(JSON.stringify(this.exportTableData))//这里面填写你接口的数据
      const datas = tableDatas
      table2excel(column, datas, this.dialogTitle + '详情')
    },