JSで画像やCSVを保存させるのにクロスブラウザ実装で悩みたくない

WEB制作
JSで画像やCSVを保存させるのにクロスブラウザ実装で悩みたくない

JavaScriptで画像やCSVなどを生成してユーザーに保存させる際にIE・EdgeだとmsSaveOrOpenBlob(),Chromeはリンクタグをbodyにdownload属性付きのaタグを追加しなくてもいいがFirefoxは追加しないとならないし、iOSはセキュリティ対策で独自の仕様を取り入れていたりと各ブラウザ毎に様々な対応が必要となって完璧にクロスブラウザの実装するのは結構骨の折れる…

そういった面倒な悩みはFileSaver.jsが引き受けくれる

目次

FileSaver.js

FileSaver.jsは、Blob形式のデータをクロスブラウザの実装を行うことができるライブラリです。

また、テキストデータのBlob化機能の提供も行われています。

canvas.toBlobのクロスブラウザ実装は、canvas-toBlob.jsで行われています。

GitHub

Examples

Saving text using require()

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Saving text

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Saving URLs

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

Saving a canvas

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

注意点

僕の環境だとiOS Chomeではうまく保存（blob化された画像の表示）ができなかったので、iosの場合は別途対応が必要かもしれない。

それでも他のブラウザの対応をしなくてもいいのはかなり助かる。

var isIOS = /iP(hone|(o|a)d)/.test(userAgent);

if (isIOS) {
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  var evt = document.createEvent('MouseEvent');
  evt.initEvent("click", true, false);
  a.dispatchEvent(evt);
} else {
  saveAs(blob, "download.jpg");
}