vue 借助插件js-table2excel 实现导出excel,并导出图片到excel。
一、界面展示
二、excel展示
三、工具:table2excel
- 安装插件
yarn add js-table2excel
2.代码实现
<template>
<div class="box">
<a-button @click="exportFn">导出</a-button>
<vxe-table :data="tableData">
<vxe-column type="seq"></vxe-column>
<vxe-column field="date" title="日期"></vxe-column>
<vxe-column field="num" title="数量"></vxe-column>
<vxe-column field="photo" title="头像" >
<template #default="{ row }">
<img :src="row.photo" alt="" style="height:50px">
</template>
</vxe-column>
</vxe-table>
</div>
</template>
<script>
const originData = [
{
date: '2022年10月1日',
num: 2,
photo:'此处为base64格式图片,字符长度大不展示。'
},
{
date: '2022年10月2日',
num: 6,
photo:'此处为base64格式图片,字符长度大不展示。'
},
{
date: '2022年10月3日',
num: 4,
photo:'此处为base64格式图片,字符长度大不展示。'
}
]
import table2excel from 'js-table2excel'
export default {
data() {
return {
tableData: originData,
}
},
methods: {
exportFn() {
let temp = [
{
title: '日期',
key: 'date',
type: 'text'
},
{
title: '数量',
key: 'num',
type: 'text'
},
{
title: '头像', // 输出 excel 列名
key: 'photo', // 表格对应列字段名
type: 'image' // 列类型
}
]
let datas = this.tableData // 表格数据
let excelName = '数据' // excel 文件名
table2excel(temp, datas, excelName)
}
}
}
</script>