ACDLを提唱します。その3

概要

ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
plunkerで、jsonを読み込み、書き込みしてみた。
vuetify使ってみた。

サンプルコード

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      search: '',
      logJson: [],
      items: []
    }
  },
  methods: {
    async loadLog(event) {
	    const files = event.target.files || event.dataTransfer.files;
   	  const file = files[0]
	    if (!this.checkFile(file)) 
	    {
		    alert("ファイルを読み込めませんでした")
		    return
	    }
	    const logData = await this.getFileData(file)
      alert(logData);
	    logJson = JSON.parse(logData)
    }, 
    getFileData(file) {
	    return new Promise((resolve, reject) => {
		    const reader = new FileReader()
		    reader.readAsText(file)
		    reader.onload = () => resolve(reader.result)
		    reader.onerror = error => reject(error)
	    })
    },
    checkFile(file) {
	    if (!file) 
	    { 
		    return false
	    }
	    if (file.type !== 'application/json') 
	    {
		    return false
	    }
	    const SIZE_LIMIT = 5000000 
      if (file.size > SIZE_LIMIT) 
	    {
		    return false
	    }
	    return true
    },
    saveLog() {
      //alert("ok1");


      var url = URL.createObjectURL(new Blob([logJson]) , { 
        type: "text/json" 
      });
      var a = document.createElement('A');
      a.download = 'data.json';
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);


    },
  }
})

成果物

以上。