Created
August 5, 2025 17:24
-
-
Save dingziao/9f141b82f0363fb980f3e074113d0374 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>DuckDB-WASM Demo</title> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "apache-arrow": "https://cdn.jsdelivr.net/npm/[email protected]/+esm" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>DuckDB-WASM 演示 - 按F12查看控制台</h1> | |
| <script type="module"> | |
| import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/duckdb-browser.mjs'; | |
| (async () => { | |
| console.log('初始化DuckDB...'); | |
| const MANUAL_BUNDLES = { | |
| mvp: { | |
| mainModule: 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/duckdb-mvp.wasm', | |
| pthreadWorker: 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/duckdb-browser-mvp.worker.js', | |
| }, | |
| }; | |
| const bundle = MANUAL_BUNDLES.mvp; | |
| const logger = new duckdb.ConsoleLogger(); | |
| // 用Blob URL创建Worker避免CORS | |
| const workerBlob = new Blob([`importScripts('${bundle.pthreadWorker}');`], {type: 'application/javascript'}); | |
| const workerUrl = URL.createObjectURL(workerBlob); | |
| const worker = new Worker(workerUrl); | |
| const db = new duckdb.AsyncDuckDB(logger, worker); | |
| await db.instantiate(bundle.mainModule); | |
| const conn = await db.connect(); | |
| console.log('DuckDB初始化完成'); | |
| const csvData = `id,name,age,city,salary | |
| 1,张三,25,北京,8000 | |
| 2,李四,32,上海,12000 | |
| 3,王五,45,广州,15000 | |
| 4,赵六,28,深圳,9500 | |
| 5,小明,35,杭州,11000`; | |
| await db.registerFileText('data.csv', csvData); | |
| console.log("所有数据:"); | |
| console.table((await conn.query(`SELECT * FROM 'data.csv'`)).toArray()); | |
| console.log("年龄>30:"); | |
| console.table((await conn.query(`SELECT name,age,city FROM 'data.csv' WHERE age>30`)).toArray()); | |
| console.log("城市统计:"); | |
| console.table((await conn.query(`SELECT city,AVG(salary) as avg_salary,COUNT(*) count FROM 'data.csv' GROUP BY city ORDER BY avg_salary DESC`)).toArray()); | |
| await conn.close(); | |
| await db.terminate(); | |
| worker.terminate(); | |
| URL.revokeObjectURL(workerUrl); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment