美文网首页
vue2中导出带有图片的excel表格

vue2中导出带有图片的excel表格

作者: 兜兜里冒糖糖 | 来源:发表于2022-03-30 16:54 被阅读0次

1、安装插件

npm install js-table2excel -S

2、新建一个excel.js文件,写出你需要导出的数据

const columnData= [
  {
    title: '序号', 
    key: 'index',
    type: 'text'
  },
  {
    title: '店铺名称', 
    key: 'shopName',
    type: 'text'
  },
  {
    title: '商品名称', 
    key: 'prodName',
    type: 'text'
  },
  {
    title: '商品图片',
    key: 'pic',
    type: 'image',
    width: 150,
    // height: 100
  }
]
export default columnData

3、在需要导出的vue文件中引入

import table2excel from 'js-table2excel'
import columnData from '../excel'

4、导出

    exportExcel(){
      var datas = this.list
      const excelName = '商品列表'                //文件名称
      table2excel(columnData, datas, excelName)    //生成Excel表格,自动下载
    },
image.png

相关文章

网友评论

      本文标题:vue2中导出带有图片的excel表格

      本文链接:https://www.haomeiwen.com/subject/akkwjrtx.html