使用 blob、XMLHttpRequest 和 WebSQL - 尝试将 blob 保存到 WebSQL，然后恢复到 window.URL.createObjectURL

Question

这是我在 stackoverflow 上的第一个问题。我尝试在此处和 Google 上进行搜索：

将文件转换为blob，将其保存在WebSQL中，然后从数据库中选择它并显示为window.URL.createObjectURL

所以...几乎所有事情都完成了我已经将 XMLHttpRequest 转换为 blob，并将 XMLHttpRequest 保存到 WebSQL 中（我选择 WebSQL 用于移动用途）但我不知道如何重新转换二进制文本blob 并使用 window.URL.createObjectURL 打开。我已经尝试了几种方法来做到这一点，包括使用 Blob builder，它会写入 URL，但什么也没有（404 错误）

下面是我的代码，cmets 是葡萄牙语，但有任何问题，尽管问。 我将查询设置为 ID=1 和 result[0] 只是为了测试。

<script>
window.URL = window.URL || window.webkitURL; //Instancia o window.URL
var xhr = new XMLHttpRequest(); //Instancia o XHMLHttpRequest

window.onload = function(){
var status = document.getElementById("status");
status.innerHTML = "Aplicação Carregada";


potti.webdb.open();//Abre o Banco
potti.webdb.createTable();//Cria a tabela

getBinary("http://www.belenosonline.com/Blob/1.pdf");//Pega o arquivo

}//Fim onload

function getBinary(url){
if(xhr != null){//Se ele conseguir criar o HMLHttpRequest
xhr.open("GET", url, true);//Abre a conexão GET para o arquivo de forma assincrona (true)
xhr.responseType = "text";
xhr.onreadystatechange = xhrHandler;//State Handler
xhr.send(null);//Não envia nada
}
else{
alert("Seu navegador não é suportado, por favor, atualize-o");
}
}

xhrHandler = function(){
if(xhr.readyState == 3){
status.innerHTML = "Carregando Arquivo";
}
else if(xhr.readyState == 4){
if(xhr.status == 200){
status.innerHTML = "Arquivo Carregado com Sucesso";

var conteudo = xhr.responseText;
potti.webdb.insert("Mozilla",conteudo);
}
else{
status.innerHTML = "Houve um erro no processamento do arquivo";
}
}
else{
status.innerHTML = "Houve um erro no processamento do arquivo";
}
}

//Encapsula o Banco de dados
var potti = {};
potti.webdb = {};
potti.webdb.db = null;


//Abre o BD
potti.webdb.open = function() {
var dbSize = 50 * 1024 * 1024; // 50MB
potti.webdb.db = openDatabase("TestBD", "1.0", "Teste", dbSize);
}

//Cria a tabela no banco
potti.webdb.createTable = function() {
var db = potti.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS TestTable(ID INTEGER PRIMARY KEY ASC, nome TEXT ,conteudo TEXT)", []);
});
}

//Insere dados no Banco
potti.webdb.insert = function(nome,conteudo){
var db = potti.webdb.db;
db.transaction(function(tx){
status.innerHTML = "Gravando no Banco";
tx.executeSql("INSERT INTO TestTable(nome, conteudo) VALUES (?,?)",
[nome, conteudo],
potti.webdb.onSuccess,
potti.webdb.onError);
});
}

//Carrega dos dados
potti.webdb.loadData = function() {
var db = potti.webdb.db;
var result = [];
db.transaction(function (tx) {
tx.executeSql("Select * TestTable WHERE ID = 1", [], function(tx, rs){
for(var i=0; i<rs.rows.length; i++) {
var row = rs.rows.item(i);
result[i] = {
"Id"    : row["ID"],
"Nome"  : row["nome"],
"Conteudo"  : row["conteudo"],
};
}
var blob = new Blob([result[0].Conteudo], { type: 'application/pdf' });
console.log(window.URL.createObjectURL(blob));

}, potti.webdb.onError);
});
}

//Erro no Banco de Dados
potti.webdb.onError = function(tx, e) {
console.log("Houve um erro " + e.message);
}

//Sucesso no Banco de Dados
potti.webdb.onSuccess = function(tx, r) {
document.getElementById("status").innerHTML = "Salvo no Banco";
potti.webdb.loadData();
}


</script>

Answer 1

经过 2 周的尝试，我在 stackoverflow 上遇到了一个问题：Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python

你必须得到一个 Arraybuffer > Convert to Base64 > Store > Get > Decode to ArrayBuffer > Create Blob