如何在Web模式下查看capacitor-community/sqlite插件的数据库数据？

可行解决方案 #

1. 导出数据库为标准SQLite文件 #

capacitor-community/sqlite在Web模式下支持将数据库导出为可直接读取的SQLite文件，通过调用插件的exportDatabase方法实现：

import { CapacitorSQLite } from '@capacitor-community/sqlite';

async function exportDatabase() {
  const exportResult = await CapacitorSQLite.exportDatabase({ database: '你的数据库名称' });
  if (exportResult.exported) {
    // 生成下载链接并触发下载
    const blob = new Blob([exportResult.data], { type: 'application/x-sqlite3' });
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = 'app-database.sqlite';
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  }
}

导出完成后，用DB Browser for SQLite这类SQLite可视化工具打开下载的文件，就能查看和编辑数据库内容。

2. 自定义内置查询控制台 #

如果想要类似H2-Console的实时查询体验，可以在Ionic应用中添加一个调试页面，调用插件的query方法执行SQL语句并展示结果：

import { CapacitorSQLite } from '@capacitor-community/sqlite';

async function executeSqlQuery(sql: string) {
  try {
    const queryResult = await CapacitorSQLite.query({
      database: '你的数据库名称',
      query: sql
    });
    // 将结果渲染到页面（比如用Angular表格组件展示）
    return queryResult.values;
  } catch (error) {
    console.error('SQL执行失败:', error);
    return [];
  }
}

在页面中添加SQL输入框和结果展示区域，通过Angular模板语法绑定查询结果，就能实现一个简易的数据库控制台。

Web模式存储说明（翻译自官方文档） #

capacitor-community/sqlite在Web端依赖sql.js实现，数据库会以二进制格式存储在浏览器的IndexedDB中。这就是直接在Chrome开发者工具IndexedDB面板查看时，只能看到无意义字节的原因——它是sql.js专用的存储格式，无法直接解析。必须通过插件提供的API或sql.js自身方法，才能读取和处理其中的数据库内容。

内容的提问来源于stack exchange，提问作者Felix Olszewski