如想要实现导出功能,并且可以导出图片,如下图效果:
下面直接上步骤:
Ⅰ 下载安装插件
安装命令:npm install js-table2excel
Ⅱ 引入插件
在需要用到的页面引入插件,如下图:
Ⅲ 使用插件
直接上代码:
onBatchExport方法中数据的key值要与data中保持一致,否则数据无法获取到,打印出的结果就回为undefined。
<template>
<div>
<el-button @click="onBatchExport">导出</el-button>
</div>
</template>
<script>
import table2excel from 'js-table2excel'
export default {
data() {
return {
tableData: [ //打印的数据
{
shouji: "15325833437",
zhaopiao: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
}
],
}
},
created() {
},
methods: {
//支持导出图片和类型转换
onBatchExport() { //导出按钮
const column = [{
title: '手机号',
key: 'shouji',
type: 'text'
},
{
title: '照片',
key: 'zhaopiao',
type: 'image',
width: 50,
height: 50
},
]
let tableDatas = JSON.parse(JSON.stringify(this.tableData))
let datas = tableDatas;
table2excel(column, datas, '数据')
},
}
}
</script>
当然要想修改导出图表的格式,那么我们需要在依赖node_modules文件夹中,找到 文件夹 js-table2excel,通过修改该文件夹下的index.js通过添加行内样式来修改样式。
实际应用中你还会发现,身份证号码的打印也会出现下图问题,
在表格中显示的并不是完全的数字,选中之后上面的展示的身份证号码为152456189602151000,而我们真正的数据中身份证号码为:152456189602151932,到导出的数据后3位全部变成了000
其实解决该问题也超级简单,我们还需从依赖node_modules文件夹中找js-table2excel文件,在js-table2excel文件夹下的index.js中找到下图中相应位置进行修改,
在行内添加vnd.ms-excel.numberformat:@
此时再次导出我们就可以发现身份证号码显示正确:
希望可以帮到你们!