vue导出excel表格(包含图片)

简介: vue导出excel表格(包含图片)

1、安装依赖:npm install xlsx --save

2、引入:

// 导出表格  按钮点击后触发事件
const onBatchExport = () => {
    const column = [
    //数据表单
    {
      title: "ID", //表头名称title
      key: "id", //数据
      type: "text", //类型
    },
    {
      title: "景区ID",
      key: "scienceid",
      type: "text",
    },
    {
      title: "景区名称",
      key: "sciencename",
      type: "text",
    },
    {
      title: "二维码",
      key: "code",
      type: "image",
      width: 80,
      height: 80,
    },  
    {
      title: "二维码状态",
      key: "state",
      type: "text",
    },
    {
      title: "创建时间",
      key: "time",
      type: "text",
      width: 130,
      height: 80,
    },
  ];
 //将数据转化为字符串(list_data数据是接口数据,把名称换成自己的数据即可)
  let tableDatas = JSON.parse(JSON.stringify(datalists.value)); 
  let datas = tableDatas;
  table2excel(column, datas, "数据"); //表单数据名称
};

3、 结果:

相关文章
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
1天前
|
前端开发 关系型数据库 MySQL
【MySQL × SpringBoot 突发奇想】全面实现流程 · 数据库导出Excel表格文件的接口
【MySQL × SpringBoot 突发奇想】全面实现流程 · 数据库导出Excel表格文件的接口
15 0
|
1天前
|
Java 关系型数据库 MySQL
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口(下)
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口
9 0
|
1天前
|
Java 关系型数据库 MySQL
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口(上)
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口
8 0
|
1天前
|
存储 数据采集 数据可视化
Python列表到Excel表格第一列的转换技术详解
Python列表到Excel表格第一列的转换技术详解
8 0
|
1天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
1天前
|
JavaScript
vue导出excel无法打开问题
vue导出excel无法打开问题
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
7 0
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
7 0
|
1天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02