2015/07/01

JavaScriptでファイルを出力する（fileSystem APIの代用）

Labels: ,
Chrome Extensionsの開発をしていて、ファイルをJSON形式で出力したくていろいろ調べていた。
Chromeにはchrome.fileSystemというAPIがあるが、Chrome Appの場合は使えるが、拡張機能（Extensions）の場合は使えない。

▶ google chrome - How to use file system in extension? - Stack Overflow


ということで、Chrome Extensionsでもできるファイルの出力方法をまとめる。



ファイルを出力する


<!-- index.html -->
<!doctype html>
<html lang="ja">
<head>
    <meta chraset="utf-8">
    <title>ファイル出力</title>
</head>
<body>
    <span id="export-link"></span>
    <script src="index.js"></script>
</body>
</html>

// index.js
var tasks = [
    { task: 'task1', isDone: true, tags: ['project1', 'memo'] },
    { task: 'task2', isDone: false, tags: ['project1', 'memo'] },
    { task: 'task3', isDone: false, tags: ['project2', 'asap'] }
];

var data = JSON.stringify(tasks);
var a = document.createElement('a');
a.textContent = 'export';
a.download = 'tasks.json';
a.href = window.URL.createObjectURL(new Blob([data], { type: 'text/plain' }));
a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');

var exportLink = document.getElementById('export-link');
exportLink.appendChild(a);


代用法は、aタグを使う。
コードのそれぞれの説明は、自分自身理解していない部分もあるので割愛する。
ポイントは「a.download」「a.href」「a.dataset.downloadurl」の部分。


実際に動かしてみたい方は、コレでどうぞ。


参考サイト




追記: 2016/05/24 23:45
主要なブラウザに対応したダウンロード処理は下記を参照ください。

以上

written by @bc_rikko
時刻:
Labels: ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )