现在图片的这个也不显示了=DISPIMG("ID_9D56491AB6CD463D821591E5F36ACF96",1),直接就不显示了,你上面的代码,怎么回事呢
时间: 2024-04-15 10:27:41 浏览: 576
非常抱歉,我之前的回答还是有误。对于包含图片的单元格,您需要提取图片并在前端页面上显示。
以下是修改后的代码,可以实现在前端导入 Excel 表格并将数据和图片展示在页面上:
```html
<input type="file" id="inputFile" />
<div id="output"></div>
```
```javascript
document.getElementById('inputFile').addEventListener('change', handleFile, false);
function handleFile(e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(e) {
var data = new Uint8Array(e.target.result);
var workbook = XLSX.read(data, { type: 'array' });
// 获取第一个工作表
var worksheet = workbook.Sheets[workbook.SheetNames[0]];
// 将表格数据转换为 JSON 格式
var jsonData = XLSX.utils.sheet_to_json(worksheet, { raw: true });
// 处理数据,包括图片
displayData(jsonData, workbook);
};
fileReader.readAsArrayBuffer(files[0]);
}
function displayData(data, workbook) {
var output = document.getElementById('output');
output.innerHTML = '';
data.forEach(function(rowData) {
var rowDiv = document.createElement('div');
for (var key in rowData) {
var cellDiv = document.createElement('div');
cellDiv.textContent = key + ': ' + rowData[key];
if (isImage(cellDiv.textContent)) {
var imgSrc = extractImage(cellDiv.textContent, workbook);
var img = document.createElement('img');
img.src = imgSrc;
cellDiv.textContent = '';
cellDiv.appendChild(img);
}
rowDiv.appendChild(cellDiv);
}
output.appendChild(rowDiv);
});
}
function isImage(cellValue) {
return cellValue.startsWith('=DISPIMG');
}
function extractImage(cellValue, workbook) {
var imgId = cellValue.split('"')[1];
var worksheet = workbook.Sheets[workbook.SheetNames[0]];
var drawings = worksheet['!drawings'];
if (drawings && drawings.length > 0) {
var drawing = drawings.find(function(d) {
return d.name === imgId;
});
if (drawing) {
return drawing.image.src;
}
}
return '';
}
```
在上述代码中,`displayData` 函数会遍历表格数据,并检查每个单元格是否包含图片。如果是图片单元格,则会提取图片并在前端页面上显示。
请注意,此示例假定 Excel 表格中的图片使用 `=DISPIMG("ID_XXX",1)` 的公式进行引用。您需要根据实际情况进行相应的修改。
希望这次能满足您的需求,如有任何问题,请随时提问!
阅读全文