JavaScriptでdata:URIの推奨ファイル名を指定する

data:URIで推奨ファイル名を指定する方法

そこで今回は、data:URI で推奨ファイル名を指定する方法を、JavaScript と HTML の両方から解説します。

JavaScript では、URL.createObjectURL() メソッドを使用して、data:URI からファイルオブジェクトを作成し、そのファイルオブジェクトに name プロパティを設定することで、推奨ファイル名を指定できます。

例：

const dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQMAAACQ2a2uAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4AQPDwkc27X3AAAABl0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaWxlIE9yZ2FuaXplAAAJcmlwdGkgY29uc3QgZGF0YVVSSSA9ICdkYXRhOmltYWdlL3BuZztiYXNlNjQsSUJCQkFDQUFBQUFBQ0FBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkF

// 画像データ
const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQMAAACQ2a2uAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4AQPDwkc27X3AAAABl0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaWxlIE9yZ2FuaXplAAAJcmlwdGkgY29uc3QgZGF0YVVSSSA9ICdkYXRhOmltYWdlL3BuZztiYXNlNjQsSUJCQkFDQUFBQUFBQ0FBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBR

data:URI で推奨ファイル名を指定する他の方法

HTML の download 属性

HTML の a 要素の download 属性を使用して、推奨ファイル名を指定できます。

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQMAAACQ2a2uAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4AQPDwkc27X3AAAABl0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaWxlIE9yZ2FuaXplAAAJcmlwdGkgY29uc3QgZGF0YVVSSSA9ICdkYXRhOmltYWdlL3BuZztiYXNlNjQsSUJCQkFDQUFBQUFBQ0FBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRkFBRk