我可以以無服務器方式使用 sql.js 嗎？

Question

我想在瀏覽器中對 SQLite 數據庫進行只讀訪問，在其中我從數據庫所在的 Windows 文件夾（而不是服務器）中獲取必要的 sql.js 代碼。

這可能嗎？如果可以，怎么做？ 我可以以歷史悠久的方式向您展示“我的代碼”，但沒有什么能接近。

Answer 1

對的，這是可能的。 下面的 HTML 和 JavaScript 示例適用於我的本地主機 web 服務器。 這兩個參考資料幫助我找到了答案：

示例：使用 object URL 顯示圖像
使用 JavaScript 在 web 上實現 SQLite — 使用 ZAC5C74B64B4B8352AFFBjs 插件的節點和瀏覽器。

我結合了兩個參考的部分來創建示例。 請注意， sql-wasm.wasm和sql-wasm.js文件預計與 HTML 和 JavaScript 文件位於同一目錄中。 我希望演示能夠自我解釋。 如果您在使其工作時遇到問題，請發表評論，我會嘗試在某處在線提供。

索引.html

<!DOCTYPE html>
<html>
    <head>
        <title>SQL.js sqlite3 Upload Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="data:,">
        <script type="text/javascript" src="sql-wasm.js"></script>
    </head>
    <body>
        <label for="query">SQL Query</label>: <input id="query" type="text" size="60" maxlength="200" value="" /><br/>
        <label for="resultColumn">Column Name</label>: <input id="resultColumn" type="text" size="30" maxlength="30" value="" /><br/>
    
        <input type="file" id="fileElem" multiple accept="application/octet-stream" style="display:none">
        <a href="#" id="fileSelect">Select some files</a>
        <div id="fileList">
          <p>No files selected!</p>
        </div>

        <script type="text/javascript" src="sqljs-upload.js"></script>
        <noscript> Please enable javascript to view the site </noscript>
    </body>
</html>

sqljs-upload.js

if (!window.FileReader) {
    alert('Your browser does not support HTML5 \'FileReader\' function required to open a file.');
    throw new Error('Your browser does not support HTML5 \'FileReader\' function required to open a file.');
}

const fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList"),
        queryElem = document.getElementById("query"),
        resultElem = document.getElementById("resultColumn");

/**
 * Event listener callback for the FileReader onload event.
 *
 */
function onLoadCallback(fileEvent) {
    const initSqlJsPromise = initSqlJs({
        locateFile: function(file){ return `${file}`; }
    });

    initSqlJsPromise.then(function(SQL) {
        const query = queryElem.value;
        const resultColumn = resultElem.value;

        fileList.innerHTML = "";
        const list = document.createElement("ul");
        fileList.appendChild(list);

        const uInt8Array = new Uint8Array( fileEvent.target.result );
        const db = new SQL.Database(uInt8Array);

        const stmt = db.prepare(query);
        while (stmt.step()) {
            const row = stmt.getAsObject()
            const li = document.createElement("li");
            list.appendChild(li);
            const info = document.createElement("span");
            info.innerHTML = `${resultColumn}: ${row[resultColumn]}`;
            li.appendChild(info);
        }
    });
}

/**
 * Event listener callback for the file upload input field.
 *
 */
function handleFiles() {
    if (!this.files.length) {
        fileList.innerHTML = "<p>No files selected!</p>";
    } else {
        var filereader = new FileReader();
        filereader.onload = onLoadCallback;

        for (let i = 0; i < this.files.length; i++) {
            filereader.readAsArrayBuffer(this.files[i]);
        }
    }
}

fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
}, false);

fileElem.addEventListener("change", handleFiles, false);

我可以以無服務器方式使用 sql.js 嗎？

問題描述

1 個解決方案

解決方案1
0 2022-07-24 10:10:55

索引.html

sqljs-upload.js

我可以以無服務器方式使用 sql.js 嗎？

問題描述

1 個解決方案

解決方案1 0 2022-07-24 10:10:55

索引.html

sqljs-upload.js

解決方案1
0 2022-07-24 10:10:55