🌐 CDN 直接引入演示

这个页面展示了如何在不使用任何构建工具（如 Webpack/Vite）的情况下，直接通过 HTML <script type="module"> 引用公网 CDN 上的 WASM 库来完成表格导出。

1. 示例数据表格

我们将使用 CDN 上的 belobog-stellar-grid 导出下面这个表格：

ID	框架	语言	Stars
1	React	JavaScript/TypeScript	210,000+
2	Vue.js	JavaScript/TypeScript	205,000+
3	Svelte	JavaScript/TypeScript	70,000+
4	belobog-stellar-grid	Rust/WebAssembly	🚀 增长中

正在从 unpkg.com 初始化 WebAssembly 模块...

2. 核心代码讲解

你只需要在 HTML 中添加一段 <script type="module">，直接导入 CDN 上的 JS 文件：

<!-- 需要设置 type="module" 支持 ES Modules -->
<script type="module">
  // 从 unpkg 引入 JS 包装器。它会自动解析相对路径加载 WASM
  import init, { export_table, ExportFormat } from "https://unpkg.com/belobog-stellar-grid@1.0.8/pkg/belobog_stellar_grid.js";
  
  // 初始化 WebAssembly 模块（会自动从 CDN 拉取 .wasm 文件）
  await init();
  console.log("WASM 加载完成！");

  // 绑定按钮事件即可
  document.getElementById('btn-csv').onclick = () => {
    export_table("demo-table", "CDN_示例.csv", ExportFormat.Csv);
  };
</script>

技术原理：由于包内发布的是标准的 ES Modules，而且 WASM 初始化时使用的是 import.meta.url 来确定 .wasm 后缀文件的路径，因此浏览器能够原生地解析基于同一 CDN 源地址的 WASM 文件依赖，从而实现了开箱即用的 CDN 分发。