From 7c9d012f7edff535fa95e4bc69cf98786a7da590 Mon Sep 17 00:00:00 2001 From: LCJ-MinYa <1049468118@qq.com> Date: Fri, 7 Nov 2025 17:00:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E5=85=A5=E5=AF=BC=E5=87=BA?= =?UTF-8?q?=E4=B8=8Eblob=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../importOrExportExcel.md | 147 ++++++++++++++++++ src/views/demo/importOrExportExcel/index.vue | 124 +++++++++++++-- 2 files changed, 256 insertions(+), 15 deletions(-) create mode 100644 src/views/demo/importOrExportExcel/importOrExportExcel.md diff --git a/src/views/demo/importOrExportExcel/importOrExportExcel.md b/src/views/demo/importOrExportExcel/importOrExportExcel.md new file mode 100644 index 0000000..2675a18 --- /dev/null +++ b/src/views/demo/importOrExportExcel/importOrExportExcel.md @@ -0,0 +1,147 @@ +## 怎么在控制台查看blob格式的内容 + +在浏览器控制台中查看 `Blob` 格式的内容，需要特别注意：**`Blob` 是二进制数据，不能像字符串一样直接打印**。如果你直接 `console.log(blob)`，控制台通常只会显示 `Blob { size: xxx, type: "..." }`，而不会显示内部的原始字节或可读内容。 + +--- + +## ✅ 正确方法：将 `Blob` 转成可读格式后查看 + +以下是 **在浏览器控制台中查看 Blob 内容的 5 种实用方式**，按推荐顺序排列： + +--- + +### ✅ 方法 1：用 `FileReader` 读取为文本（适用于文本类 Blob，如 `.txt`, `.json`, `.html`） + +```js +// 假设你有一个 Blob 对象 +const blob = new Blob(['Hello World'], { type: 'text/plain' }); + +// 使用 FileReader 读取为文本 +const reader = new FileReader(); +reader.onload = function (e) { + console.log('Blob 内容（文本）:', e.target.result); +}; +reader.readAsText(blob); // ✅ 重点：readAsText +``` + +> ✅ 适合：`.txt`, `.json`, `.html`, `.xml` 等文本格式。 + +--- + +### ✅ 方法 2：读取为 Base64 字符串（查看原始编码） + +```js +const reader = new FileReader(); +reader.onload = function (e) { + console.log('Blob 的 Base64 编码:', e.target.result); +}; +reader.readAsDataURL(blob); // ✅ 读取为 data URL，包含 base64 +``` + +> ✅ 输出示例： +> ``` +> data:text/plain;base64,SGVsbG8gV29ybGQ= +> ``` +> +> - `data:` 协议 + `base64` 编码； +> - 可以复制粘贴到浏览器或工具中解码查看。 + +--- + +### ✅ 方法 3：读取为 ArrayBuffer（查看原始字节流） + +```js +const reader = new FileReader(); +reader.onload = function (e) { + const arrayBuffer = e.target.result; + const uint8Array = new Uint8Array(arrayBuffer); + console.log('原始字节流（Uint8Array）:', uint8Array); + console.log('字节数组（前 20 个字节）:', uint8Array.slice(0, 20)); +}; +reader.readAsArrayBuffer(blob); // ✅ 读取为 ArrayBuffer +``` + +> ✅ 输出示例： +> ``` +> Uint8Array(11) [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +> ``` +> +> - 每个数字是字节值（ASCII 码）； +> - 适合查看 PDF、Excel、图片等二进制文件的头部签名。 + +--- +### ✅ 方法 4：查看 Blob 的 `type` 和 `size`（基本信息） + +```js +console.log('Blob 类型:', blob.type); // 如: 'application/pdf' +console.log('Blob 大小:', blob.size, '字节'); // 如: 12345 +``` + +> ✅ 快速判断文件类型和大小。 + +--- + +### ✅ 方法 5：用 `console.table()` 显示字节数组（更清晰） + +```js +const reader = new FileReader(); +reader.onload = function (e) { + const uint8Array = new Uint8Array(e.target.result); + const table = Array.from(uint8Array).map((byte, index) => ({ + index, + byte, + hex: byte.toString(16).padStart(2, '0'), + char: String.fromCharCode(byte) + })); + console.table(table.slice(0, 20)); // 显示前 20 个字节 +}; +reader.readAsArrayBuffer(blob); +``` + +> ✅ 输出表格，清晰展示： +> - 字节索引、值、十六进制、ASCII 字符。 + +--- + +## 🔍 如何判断 Blob 是什么文件？ + +通过 `blob.type` 和 `arrayBuffer` 的前几个字节判断： + +| 文件类型 | `blob.type` | 前 4 字节（Hex） | 说明 | +|----------|-------------|------------------|------| +| PDF | `application/pdf` | `25 50 44 46` | `%PDF` | +| Excel `.xlsx` | `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` | `50 4B 03 04` | `PK`（ZIP 格式） | +| Word `.docx` | `application/vnd.openxmlformats-officedocument.wordprocessingml.document` | `50 4B 03 04` | 同上 | +| PNG 图片 | `image/png` | `89 50 4E 47` | `‰PNG` | +| JPEG 图片 | `image/jpeg` | `FF D8 FF E0` | `ÿØÿà` | + +> ✅ 用 `new Uint8Array(arrayBuffer).slice(0, 4)` 查看前 4 字节即可快速识别。 + +--- +## ✅ 常见错误写法（不要这样做） + +```js +console.log(blob); // ❌ 只显示 Blob 对象，看不到内容 +console.log(blob.toString()); // ❌ 返回 [object Blob]，无意义 +``` + +> ⚠️ 这些写法无法获取实际内容！ + +--- + +## ✅ 总结：查看 Blob 内容的正确流程 + +| 目标 | 推荐方法 | +|------|----------| +| 查看文本内容（JSON、TXT） | `readAsText(blob)` | +| 查看原始编码（Base64） | `readAsDataURL(blob)` | +| 查看原始字节流 | `readAsArrayBuffer(blob)` + `Uint8Array` | +| 快速判断文件类型 | `blob.type` + 前 4 字节 | +| 清晰查看字节结构 | `console.table` + `Uint8Array` | + +--- + +### ✅ 一句话总结： + +> 🔍 **不能直接 `console.log(blob)` 查看内容**，必须使用 `FileReader` 读取为 `Text`、`DataURL` 或 `ArrayBuffer`，再转换为可读格式。 +> ✅ 最推荐：用 `readAsArrayBuffer` + `Uint8Array` 查看原始字节，结合 `console.table` 更清晰。 \ No newline at end of file diff --git a/src/views/demo/importOrExportExcel/index.vue b/src/views/demo/importOrExportExcel/index.vue index a5de7aa..c3e0c29 100644 --- a/src/views/demo/importOrExportExcel/index.vue +++ b/src/views/demo/importOrExportExcel/index.vue @@ -1,24 +1,51 @@