Question

这是我在stackoverflow上的问题。我尝试在这里搜索并在谷歌的方式：

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

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

以下是我的代码，评论是葡萄牙语，但任何问题，请问。我将查询设置为ID = 1，将结果[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＆gt;转换为Base64＆gt;商店＆gt;获取＆gt;解码到ArrayBuffer＆gt;创建Blob

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

1 个答案: