图片word文档和xsl文件转换base64案例
下面代码运行后,点击查看/预览文件按钮，如果是图片会直接展示图片，如果是word文档或者xsl文件会下载文件，这个示例主要是教怎么去使用html将word文档和xsl文件转换为base64编码
选择单个文件
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>本地文件 Base64 预览</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
#viewBtn {
display: none;
margin: 15px 0;
}
iframe,
img {
max-width: 100%;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>选择文件 → 控制台打印 Base64 → 页面预览/下载</h2>
<!-- 文件选择框 -->
<input type="file" id="fileInput" accept="image/*,.doc,.docx,.xls,.xlsx" />
<!-- 下载按钮（图片是查看，文档和xsl是下载）（隐藏状态） -->
<button id="viewBtn">查看/下载文件</button>
<!-- 预览图片区域 -->
<div id="previewArea"></div>
<script>
const fileInput = document.getElementById('fileInput');
const viewBtn = document.getElementById('viewBtn');
const preview = document.getElementById('previewArea');
let current = { name: '', type: '', base64: '', dataURL: '' };
/* 1. 选择文件 → 转 Base64 → 控制台打印 → 显示按钮 */
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (evt) => {
current.dataURL = evt.target.result; // data:...;base64,XXXX
current.base64 = current.dataURL.split(',')[1];
current.name = file.name;
current.type = file.type;
console.log('=== Base64 字符串 ===');
console.log(current.base64);
viewBtn.style.display = 'inline-block'; // 显示按钮
preview.innerHTML = ''; // 清空旧预览
};
// 必须加下面这行代码,这个渲染完毕才会触发上面的onload事件
// 这个事件会在文件读取完成后触发,并将文件内容作为 Data URL 赋值给 result 属性
reader.readAsDataURL(file);
});
/* 2. 点击「下载」→ 根据文件类型下载,图片的话直接显示,文档，xsl都是直接下载 */
viewBtn.addEventListener('click', () => {
preview.innerHTML = '';
if (current.type.startsWith('image/')) {
const img = document.createElement('img');
img.src = current.dataURL;
preview.appendChild(img);
} else {
// 直接下载文件
const blob = b64toBlob(current.base64, current.type);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = current.name;
a.click();
URL.revokeObjectURL(url);
}
});
/* Base64 → Blob 小工具 */
function b64toBlob(b64, type) {
const bytes = atob(b64);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) ia[i] = bytes.charCodeAt(i);
return new Blob([ab], { type });
}
</script>
</body>
</html>批量选择多个文件
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>多文件 Base64 预览/下载</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
max-width: 600px;
}
img {
max-width: 200px;
display: block;
margin-top: 8px;
}
button {
margin-top: 8px;
padding: 5px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>选择多个文件 → 控制台打印 Base64 → 页面预览/下载</h2>
<!-- 多选文件 -->
<input
type="file"
id="fileInput"
multiple
accept="image/*,.doc,.docx,.xls,.xlsx"
/>
<!-- 预览区域 -->
<div id="previewArea"></div>
<script>
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('previewArea');
let filesData = [];
/* 1. 选择多个文件 → 转 Base64 → 控制台打印 → 显示按钮 */
fileInput.addEventListener('change', async (e) => {
const files = Array.from(e.target.files);
if (!files.length) return;
preview.innerHTML = '处理中...';
filesData = [];
for (const file of files) {
const dataURL = await readFileAsDataURL(file);
filesData.push({
name: file.name,
type: file.type,
dataURL,
base64: dataURL.split(',')[1],
});
console.log(`=== ${file.name} 的 Base64 ===`);
console.log(dataURL.split(',')[1]);
}
preview.innerHTML = '';
renderPreviewList();
});
/* 封装 FileReader Promise */
function readFileAsDataURL(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => resolve(e.target.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
/* 2. 渲染预览列表（图片直接显示，文档提供下载按钮） */
function renderPreviewList() {
const ul = document.createElement('ul');
filesData.forEach((f) => {
const li = document.createElement('li');
const title = document.createElement('strong');
title.textContent = f.name;
li.appendChild(title);
if (f.type.startsWith('image/')) {
const img = document.createElement('img');
img.src = f.dataURL;
li.appendChild(img);
} else {
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '下载';
downloadBtn.onclick = () => downloadFile(f);
li.appendChild(downloadBtn);
}
ul.appendChild(li);
});
preview.appendChild(ul);
}
/* 3. 下载非图片文件 */
function downloadFile({ base64, type, name }) {
const blob = b64toBlob(base64, type);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = name;
a.click();
URL.revokeObjectURL(url);
}
/* Base64 → Blob 小工具 */
function b64toBlob(b64, type) {
const bytes = atob(b64);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) ia[i] = bytes.charCodeAt(i);
return new Blob([ab], { type });
}
</script>
</body>
</html>