見出し画像

File API, Blob で、ファイルのエクスポート, インポート機能とIndexedDB登録, Vue CLI版


■ 概要:

IndexedDB + Vue CLIで
Dexie.js ライブラリを使用した構成となり。
json ファイルのエクポート、インポートとなります
File API , Blob等で実現できそうでした。

・インポートした jsonファイルを IndexedDB
 登録まで。実装しております

■ 環境

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

■ 参考

File
https://developer.mozilla.org/ja/docs/Web/API/File

Blob:
https://developer.mozilla.org/ja/docs/Web/API/Blob

http://www.tohoho-web.com/html5/file_api.html

https://qiita.com/wadahiro/items/eb50ac6bbe2e18cf8813

■ 画面

画像1

・ input type=file で、ファイルを指定して。 changeイベントで
 dbインポート処理しています。

■ 参考のページ

ここから先は

1,671字

IndexedDB, Vue CLI 開発の事例、ノウハウに関する記事を集めました。 ■ 免責事項 / 注記 , 内容について動作確認…

この記事が気に入ったらサポートをしてみませんか?