vue 使用table2excel导出excel表格（带图片）

        如想要实现导出功能，并且可以导出图片，如下图效果：

        

         

 

        下面直接上步骤：

        Ⅰ  下载安装插件

                安装命令：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:@

         此时再次导出我们就可以发现身份证号码显示正确：

        希望可以帮到你们！