Экспортировать хранилище объектов indexeddb в .csv - PullRequest
Новая
       10

Экспортировать хранилище объектов indexeddb в .csv

0 голосов
/ 20 февраля 2019

У меня есть хранилище объектов, которое мне нужно экспортировать или загрузить как файл .csv.Я провел некоторый поиск и не могу найти информацию об этой функции.Ответы, в которых не используется IDB, приветствуются.

Некоторая справка: Это часть рабочего проекта, и я углубляюсь в этот проект без предварительного знания какого-либо кодирования.Я использую Chromebook, выпущенный компанией, поэтому (насколько мне известно) установки NPM недоступны.

Фон приложения: Проект представляет собой опрос клиентов, проводимый через один терминал.Этот терминал - мой Chromebook с надеждой перейти на iPad, если я смогу успешно загрузить пользовательские данные в файл .csv

Что у меня так далеко: 

  (function leadIDB() {

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB|| window.msIndexedDB;

if (!window.indexedDB) {
  alert('indexDB not supported in this browser');
}

let request = window.indexedDB.open("leadDB", 1),
  db,
  tx,
  store,
  index;

request.onupgradeneeded = function(e) {
  let db = request.result,
    store = db.createObjectStore("LeadStore", {keyPath: "leadID", autoIncrement: true});
      index = store.createIndex("firstName", "firstName", {unique: false});
};

request.onerror = function(e) {
  console.log("There was an error: " + e.target.errorCode);
};

request.onsuccess = function(e) {
  db = request.result;
  tx = db.transaction("LeadStore", "readwrite");
  store = tx.objectStore("LeadStore");
  index = store.index("firstName");

  db.onerror = function(e) {
    console.log("ERROR" + e.target.errorCode);
  };

  store.put(newLead);


  let lead = store.getAll();

  lead.onsuccess = function() {
    console.log(lead.result);
    console.log(lead.result.firstName);
  };


  tx.oncomplete = function() {
    console.log('Item added to LeadDB');
    db.close();
  };
 };
})();

1 Ответ

0 голосов
/ 21 февраля 2019

Вы на правильном пути.Есть еще несколько вещей, которые нужно сделать.Во-первых, вы должны иметь возможность продолжить обработку после загрузки данных из indexedDB в память js.Затем вам нужно сгенерировать файл CSV в памяти (в виде гигантской строки).Затем вам нужно преобразовать строку csv в файл (который реализует Blob ).Наконец, вы хотите запустить загрузку файла.

Есть несколько способов сделать первый шаг.Я собираюсь использовать обещание, но вы можете сделать это с помощью обратного вызова или чего угодно. 

function loadData() {
  return new Promise((resolve, reject) => {
    var openrequest = indexedDB.open(...);
    openrequest.onupgradeneeded = ...;
    openrequest.onerror = event => reject(event.target.error);
    openrequest.onsuccess = event => {
      var db = event.target.result;
      var txn = db.transaction(...);
      var store = txn.objectStore(...);
      var loadrequest = store.getAll();
      loadrequest.onerror = event => reject(event.target.error);
      loadrequest.onsuccess = event => {
        var data = event.target.result;
        resolve(data);
      };
    };
  });
}

// You could call the function like this for example:
async function foo() {
  var data = await loadData();
  console.log('loaded the data, loaded %d objects', data.length);
}

Далее вы хотите преобразовать данные в строку в формате csv. 

// This is not perfect, just an example of getting you closer
function toCSV(data) {
  var output = [];
  for(var object of data) {
    var row = [];
    for(var prop in object) {
      row.push(to_csv_value(object[prop]));
      row.push(',');
    }
    row.push('\n');
    output.push(row.join(''));
  }

  return output.join('');
}

function to_csv_value(value) {
  var output = '"';
  output += value.replace('"', '\\"');
  return output + '"';
}

// and then to compose it for example:
async function foo() {
  var data = await loadData();
  var csvstring = toCSV(data);
}

Далее вы хотите создать файл.Вы можете использовать конструктор Blob для этого.Что-то вроде следующего: 

// Because File implements blob interface, we are effectively creating a file
// by creating a blob
function createCSVFileFromString(string) {
  var csv_mime_type = 'text/csv';
  return new Blob([string], {type: csv_mime_type});
}

// And again, to compose it:
async function foo() {
  var data = await loadData();
  var string = toCSV(data);
  var blob = createCSVFileFromString(string);
}

Следующим шагом является загрузка BLOB-объекта.Обычно это можно сделать с помощью стратегии URL объекта.Примерно так: 

function downloadBlob(blob, filename) {
  var anchor = document.createElement('a');
  anchor.setAttribute('download', filename);
  var url = URL.createObjectURL(blob);
  anchor.setAttribute('href', url);
  anchor.click();
  URL.revokeObjectURL(url);
}

// And finally, to compose it all together
async function loadAndStartDownloadingData() {
  var data = await loadData();
  var csvstring = toCSV(data);
  var blob = createCSVFileFromString(csvstring);
  downloadBlob(blob, 'mydata.csv');
}

Затем, где-нибудь в вашем приложении, скажем, по нажатию кнопки, вы бы сделали что-то вроде этого.Я использую не асинхронный синтаксис здесь только для примера использования обещания в не-ожидании, вы всегда должны быть осторожны, чтобы не скрывать ошибки. 

var button = ...;
button.onclick = function(event) {
  // Load the data and trigger the download, and send any problems to console
  loadAndStartDownloadingData().catch(console.warn);
};

Обратите внимание, это не касается вставки данных, ноЯ уверен, что вы можете понять это.

...