GridCraft预览
只读的XLSX/XLS电子表格浏览器为web，由 GridCraft。
特性
- ✅ 打开XLSX/XLS文件 从文件/Blob对象
- ✅ 表导航 -在工作表之间切换
- ✅ 缩放控件 -放大/缩小/适合窗口
- ✅ 细胞的选择 —选择和查看单元格内容（只读）
- ✅ 搜索 -查找当前工作表中的文本
- ✅ 复制 -复制单元格内容到剪贴板
- ✅ 多语言 - 19种语言，包括英文和中文
- ✅ 主题切换 -明暗或自动（跟随系统）
- ❌ 没有编辑 —禁用所有编辑功能
安装
npm install gridcraft-preview
用法
基本的例子
import init, { GridCraftPreview } from 'gridcraft-preview';
// Initialize WASM module (must be called once before using the preview)
await init();
// Create preview instance
const preview = new GridCraftPreview();
// Load a file
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file) {
await preview.loadFile(file);
}
});
// Control the view
preview.zoomIn();
preview.zoomOut();
preview.zoomToFit();
preview.setZoom(125); // 125%
// Navigate sheets
const sheets = preview.getSheetNames();
console.log('Available sheets:', sheets);
preview.switchSheet('Sheet2');
// Search
const matchCount = preview.find('total', { matchCase: false });
console.log(`Found ${matchCount} matches`);
preview.findNext();
// Internationalization
preview.setLanguage('zh'); // Switch to Chinese
preview.setLanguage('en'); // Switch back to English
// Theme
preview.setTheme('dark');
preview.setTheme('auto'); // Follow system preference
从URL加载
import init, { GridCraftPreview } from 'gridcraft-preview';
await init();
const preview = new GridCraftPreview();
// Fetch and load a spreadsheet
const response = await fetch('/data/spreadsheet.xlsx');
const blob = await response.blob();
await preview.loadFile(blob, 'spreadsheet.xlsx');
HTML集成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GridCraft Preview Example</title>
</head>
<body>
<div>
<input type="file" id="fileInput" accept=".xlsx,.xls" />
<button onclick="preview.zoomIn()">Zoom In</button>
<button onclick="preview.zoomOut()">Zoom Out</button>
<button onclick="preview.zoomToFit()">Fit</button>
</div>
<canvas id="gridcraft_canvas" style="width: 100%; height: 600px;"></canvas>
<script type="module">
import init, { GridCraftPreview } from './node_modules/gridcraft-preview/dist/index.js';
await init();
window.preview = new GridCraftPreview();
document.getElementById('fileInput').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file) {
await window.preview.loadFile(file);
}
});
</script>
</body>
</html>
API参考
看到 index.d.ts 获取完整的TypeScript定义。
GridCraftPreview
用于控制预览的主类。
构造函数
const preview = new GridCraftPreview();
方法
文件操作
loadFile(file: File | Blob, filename?: string): Promise<void>—加载电子表格文件
视图控件
zoomIn(): void-放大zoomOut(): void-缩小zoomToFit(): void-缩放以适应窗口setZoom(percentage: number): void—设置具体的缩放级别
表导航
getSheetNames(): string[]-获取所有表单名称getCurrentSheet(): string-获取当前工作表名称switchSheet(name: string): void-切换到工作表
选择
getSelection(): string-获取当前选择范围selectRange(range: string): void—选择范围
搜索
find(query: string, options?: FindOptions): number-查找文本findNext(): boolean-查找下一个事件findPrevious(): boolean-查找以前的事件
本地化
setLanguage(lang: Language): void-设置界面语言setTheme(theme: Theme): void-设置颜色主题
支持的语言
英语(en), 简体中文 (zh), Español (es), 日本語 (ja), (ko)， Русский (ru), Português (pt)、德语(de)， Čeština (cs)，法国(fr)， Српски (sr)、<s:1> rk<e:1> (tr)，波兰(pl)，意大利语(it)， Українська (uk), Tiếng Việt (vi)、荷兰(nl)、romnui (ro)， Ελληνικά (el）
支持的文件格式
- XLSX - Excel 2007+工作簿（完全支持）
- XLSM -支持Excel宏的工作簿（仅查看，不支持宏）
- XLS - Excel 97-2003工作簿（值和公式，格式有限）
浏览器兼容性
需要支持WebGPU或WebGL2的现代浏览器：
- Chrome /边缘79 +
- Firefox 51 +
- Safari 15 +
- 歌剧66 +
大小
- 未压缩的WASM: ~ 3mb
- 压缩：~ 1mb
许可证
双重许可下 麻省理工学院 或 apache - 2.0，由你选择。
学分
建立与 GridCraft - ArtCraft团队的开源电子表格软件。