2011-01-23 25 views
6

ユーザーとのやりとりの結果としてCSVファイルを生成して、ユーザーにダウンロードを促したいとします。どうやってやるの?Google Chrome拡張機能でダウンロードするファイルを生成するにはどうすればよいですか?

私はまっすぐなJSでは可能ではないと思いますが、Chromeは私にいくつか高い特権を与えますか?

+0

私はASP.NETでこれをやりました。どのようなテクノロジーを使用していますか? –

+0

@Jon:Chrome拡張機能はJSで書かれています...他のオプションはありません。 – mpen

答えて

2

Chromeはこれをサポートしていませんが、舞台裏でフラッシュコンポーネントを使用しているdownloadify jsライブラリを使用してファイル保存ダイアログを表示できる必要があると思います。

+0

デモを試してみるとFirefoxがクラッシュするようです。 Chromeはクラッシュすることはありません...だから、私はそれで生きることができると思います。 – mpen

5

HTML5 File APIを使用してファイルをダウンロードできるようになりました。それはまだ開発中ですが、そのファイルダウンロードにBlobBuilderを使用し、ご利用をリダイレクトすることができます:

http://www.html5rocks.com/tutorials/file/filesystem/

+0

Chrome 10はこれをサポートしていますか? – mpen

+0

はい、Chrome 10では「window.webkitURL.createObjectURL」に変更しました。それを反映するために私の答えを編集しました。このアプローチの唯一の問題(間もなく解決される)は、ファイル名を制御できないことです。あなたの検査官で試してみてください。 –

+0

"ローカルリソースをロードできません:blob:null/6b2c341a-ad40-48b2-9755-1b7134832d39"私はアドレスバーにコピーしてファイルをダウンロードできますが、なぜChromeはそれを許可しませんか? – mpen

1
:ファイルAPIの詳細については

var bb = new BlobBuilder(); 
bb.append(csvContents); 
var blob = bb.getBlob(); 
location.href = window.webkitURL.createObjectURL(blob); 

をするHTML5 Rocksは偉大なチュートリアルを持っています

最新のファイルを作成し、Chrome拡張機能でそのファイルをダウンロードする必要がありました。ここでは、ES6を使用してそれを行うコードスニペット、および推奨される方法は以下のとおりです。

let docContent = ... /* your content */; 
let doc = URL.createObjectURL(new Blob([docContent], {type: 'application/octet-binary'})); 
chrome.downloads.download({ url: doc, filename: filename, conflictAction: 'overwrite', saveAs: true }); 

あなたはまた、manifest.jsonに適切な権限を宣言する必要があります。

"permissions" : ["downloads"] 
関連する問題