我可以以无服务器方式使用 sql.js 吗？

Question

I want to do read-only access to a SQLite database in a browser, where I get the necessary sql.js codes from the Windows folder (rather than a server) where the database is housed.我想在浏览器中对 SQLite 数据库进行只读访问，在其中我从数据库所在的 Windows 文件夹（而不是服务器）中获取必要的 sql.js 代码。

Is this possible and, if so, how?这可能吗？如果可以，怎么做？ I could show you 'my code' in the time-honoured way but nothing gets close.我可以以历史悠久的方式向您展示“我的代码”，但没有什么能接近。

Answer 1

Yes it is possible.对的，这是可能的。 The HTML and JavaScript sample below works on my localhost web server.下面的 HTML 和 JavaScript 示例适用于我的本地主机 web 服务器。 These two references helped me find the answer:这两个参考资料帮助我找到了答案：

Example: Using object URLs to display images 示例：使用 object URL 显示图像
Implement SQLite on web with JavaScript — both Node & Browser with sql.js plugin 使用 JavaScript 在 web 上实现 SQLite — 使用 ZAC5C74B64B4B8352AFFBjs 插件的节点和浏览器。

I combined parts of both references to create the sample.我结合了两个参考的部分来创建示例。 Please note that the sql-wasm.wasm and sql-wasm.js files are expected to be in the same directory as the HTML and JavaScript files.请注意， sql-wasm.wasm和sql-wasm.js文件预计与 HTML 和 JavaScript 文件位于同一目录中。 I hope the demo explains itself.我希望演示能够自我解释。 If you have problems making it work, post a comment and I will try to provide it online somewhere.如果您在使其工作时遇到问题，请发表评论，我会尝试在某处在线提供。

index.html索引.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 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

index.html索引.html

sqljs-upload.js sqljs-upload.js

我可以以无服务器方式使用 sql.js 吗？

问题描述

1 个解决方案

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

index.html索引.html

sqljs-upload.js sqljs-upload.js

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