如何在 JavaScript 中将图像数据导出到 XLSX 文件中？

如何在 JavaScript 中将图像数据导出到 XLSX 文件中

概述

在日常数据处理工作中，我们需要将包含图像数据的记录导出到可视化友好的格式中，例如 XLSX。但是，直接使用 SheetJS 库导出时，Excel 中只会显示 base64 文本，而不是实际图像。本指南将提供分步说明，指导您如何转换 base64 图像数据，并将其嵌入 XLSX 文件中，以便在 Excel 中正确显示。

解决方法

1. 导入必要的库

首先，导入所需的 JavaScript 库，包括 SheetJS 和一个实用函数来将 base64 数据转换为 ArrayBuffer：

import * as XLSX from "xlsx";
import { base64ToArrayBuffer } from "./utils";

2. 将 base64 数据转换为 ArrayBuffer

使用 base64ToArrayBuffer 实用函数将 base64 图像数据转换为 ArrayBuffer，以便 SheetJS 可以识别它为图像：

const base64Image = "iVBORw0KGgoAAAANSUhEUgAAAFQAAAAPQCAMAAACl/cLqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBODJCMzI5MjQ1N0Q0ODExOEUyRjhGRDE1NTUwRjZFMjIiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtbDpyZGY6b3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkE4MkIzMjkxNDU3RDQ4MTE4RTJGOEYwRTU1NTBGNkUyMiI+IDx4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+YWRvYmU6ZGdoaWQ6cGhvdG9zaG9wOjA4ZDRkNTM5LWQyOWYtMTFlOS05MjFlLTAwZGMxMjMxZTQxYT4gPC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+IDx4bXBNTTpIaXN0b3J5PgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM2NTIwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM2NzIwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIvPgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM2ODYwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM2OUEwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIvPgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM2OEEwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM3MTIwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIvPgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM2NTEwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM2NTQwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIvPgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM2NjEwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM3MTMwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIvPgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM2NTYwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM2NjYwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIvPgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM3MjMwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM3MTYwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIvPgogICA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTFDQzM3MjEwQTkxMUQ5OTBGRjA3Q0QwQkI1RjFEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTFDQzM2NzIwQTkxMUQ5OTBGRjA3Q0Qw