vue3导出excel表格（包括导出图片）

一、只导出数据（不包括图片）

安装依赖：npm install xlsx --save

import * as XLSX from "xlsx";

<div
    class="add_inner"
    @click="onBatchExport"
    style="background-color: #67c23a"
       >
     <p>导出</p>
</div>

我这里直接使用接口了

const tableData = ref([]); //用来存放导出的数据
const onBatchExport = () => {
  axios({
    url: "/pcapi/Redeem/index", // url
    params: {},
  })
    .then(function (res) {
      console.log(res.data.data); // 成功回调
      tableData.value = res.data.data;    //将获取到的数据赋给声明的数组
      const data = XLSX.utils.json_to_sheet(tableData.value); //此处tableData.value为表格的数据
      const dc = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(dc, data, "test-data"); //test-data为自定义的sheet表名
      XLSX.writeFile(dc, "test.xlsx"); //test.xlsx为自定义的文件名
    })
    .catch(function (err) {
      console.log(err); // 失败回调
    });
};

 可直接导出，导出结果：

第二种：可以导出图片.

下载依赖:  

npm install js-table2excel

引入路径：

import table2excel from 'js-table2excel'

// 导出
const onBatchExport = () => {//导出按钮
  console.log(123);
  console.log(page_data.value);
  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: "time",
      type: "text",
      width: 130,
      height: 80,
    },
    {
      title: "二维码状态",
      key: "fon",
      type: "text",
    },
  ];

  let tableDatas = JSON.parse(JSON.stringify(list_data.value)); //将数据转化为字符串(list_data数据是接口数据，把名称换成自己的数据即可)
  let datas = tableDatas;
  table2excel(column, datas, "数据"); //表单数据名称
};
</script>