试过table2Excel导出,图片是可以导出,但是只要表格有合并的单元格会导致列错位
以下代码是将图片转为base64,导出的excel文件中的图片也是base64的
exportExcel:function(options = {}){
var defaults = {
id:"bootstrap-table",
type: 'excel',
fileName: 'excel数据',
mso: {
worksheetName: options.fileName || 'excel数据',
styles:[
'background-color',
'font-size',
'width',
'height',
'border',
'text-align',
'vertical-align',
'border-bottom',
'border-top',
'border-left',
'border-right'
]
},
}
var options = $.extend(defaults, options);
options.onCellData = function (cell, row, col, data) {
// check if the cell contains an image
let image = $(cell).find('img');
if (image.length > 0) {
var img = new Image();
img.src = image[0].currentSrc;
img.setAttribute("crossOrigin",'Anonymous')
// // return the image source as the cell data
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg', 0.95);
return dataURL;
} else {
// return the default cell data
return data;
}
};
$('#'+options.id).tableExport(options)
},
不知道你这个问题是否已经解决, 如果还没有解决的话:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ignore (rows, cols, cells)</title>
<link href="./tableexport.min.css" rel="stylesheet">
<link href="./examples.css" rel="stylesheet">
</head>
<body>
<main>
<table id="ignore-cols-table">
<thead>
<tr>
<th>Name</th>
<th class="target">Position</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thor Walton</td>
<td class="target">Regional Director</td>
<td>45</td>
<td>$98,540</td>
</tr>
<tr>
<td>Travis Clarke</td>
<td class="target">Software Engineer</td>
<td>30</td>
<td>$275,000</td>
</tr>
<tr>
<td>Suki Burks</td>
<td class="target">Office Manager</td>
<td>22</td>
<td>$67,670</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disabled"></td>
<td class="target"></td>
<td class="disabled"></td>
<th>$441,210</th>
</tr>
</tfoot>
</table>
</main>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./xlsx.core.min.js"></script>
<script type="text/javascript" src="./Blob.min.js"></script>
<script type="text/javascript" src="./FileSaver.min.js"></script>
<script type="text/javascript" src="./tableexport.min.js"></script>
<script>
var IgnoreCols = document.getElementById('ignore-cols-table');
new TableExport(IgnoreCols, {
filename: new Date(),//导出名称
formats: ["xlsx","xls"], //导出格式
position: "top",//按钮位置
ignoreCols: 3, //忽略列序号,不忽略则为null
ignoreRows: null, //忽略行序号,不忽略则为null
});
</script>
</body>
</html>
上述代码中使用到的引用文件可以从链接2、3、4中找到。