图片还是不显示,怎么回事
时间: 2024-04-15 08:27:55 浏览: 148
非常抱歉,我之前的回答仍然存在问题。在处理包含图片的单元格时,需要对图片进行正确的处理和展示。以下是修改后的代码示例,可以在前端导入 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);
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) {
var imgId = cellValue.split('"')[1];
var imgElement = document.getElementById(imgId);
if (imgElement) {
return imgElement.src;
}
return '';
}
```
在上述代码中,我假设 Excel 表格中的图片使用 `=DISPIMG("ID_XXX",1)` 的公式进行引用。我将 `extractImage` 函数修改为从页面中获取图片元素并返回其源地址。
请确保您的页面中包含了正确的图片元素,例如:
```html
<img id="ID_9D56491AB6CD463D821591E5F36ACF96" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QA2RXhpZgAATU0AKgAAAAgAA1EQAAEAAAABAQAAAFERAAQAAAABAAAAAFESAAQAAAABAAAAAAAAAAEaAAUAAAABAAAAAAGgAAUAAAABAAAAAAAAAAIAAQADAAAAAQAAAAAAAAD/2wBDAAIBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB..."/>
```
请确保图片元素的 `id` 属性与 Excel 表格中的图片引用一致。
希望这次能满足您的需求,如有任何问题,请随时提问!
阅读全文