データをファイルとしてダウンロードする

JavaScript

/**
 * テキストデータのダウンロード
 * @param {string} text ダウンロードする対象となるテキスト
 * @param {string} fileName ファイル名
 * @param {string} [mimeType="text/plain"] テキストの種類（MIMEタイプ）
 * @param {boolean} [withBOM=false] BOM付きにするかどうか
 */
const textDownload = (text, fileName, mimeType = 'text/plain', withBOM = false) => {
	let data = [];

	// BOM付きにしたい場合
	if (withBOM) data.push(new Uint8Array([0xef, 0xbb, 0xbf]));

	data.push(text);

	const blob = new Blob(data, { type : mimeType });

	// a要素の生成
	const anchorElem = document.body.appendChild(document.createElement('a'));
	anchorElem.setAttribute('href', URL.createObjectURL(blob));
	anchorElem.setAttribute('target', '_blank');
	anchorElem.setAttribute('download', fileName);
	anchorElem.style.visibility = 'hidden';

	// イベント実行
	anchorElem.dispatchEvent(new MouseEvent('click', {
		view       : window,
		bubbles    : false,
		cancelable : false
	}));

	document.body.removeChild(anchorElem);
};

// ダウンロード実行
textDownload('あいうえお\nかきくけこ', 'sample.txt');

JavaScript

/**
 * Canvasデータのダウンロード
 * @param {HTMLCanvasElement} canvasElem ダウンロードする対象のcanvas要素
 * @param {string} fileName ファイル名
 * @param {string} [mimeType="image/png"] 画像の形式（MIMEタイプ）
 * @param {number} [quality=1] 画像の品質（1～0の間で指定）
 */
const canvasDownload = (canvasElem, fileName, mimeType = 'image/png', quality = 1) => {
	// a要素の生成
	const anchorElem = document.body.appendChild(document.createElement('a'));
	anchorElem.setAttribute('href', canvasElem.toDataURL(mimeType, quality));
	anchorElem.setAttribute('target', '_blank');
	anchorElem.setAttribute('download', fileName);
	anchorElem.style.visibility = 'hidden';

	// イベント実行
	anchorElem.dispatchEvent(new MouseEvent('click', {
		view       : window,
		bubbles    : false,
		cancelable : false
	}));

	document.body.removeChild(anchorElem);
};

// ダウンロード実行
canvasDownload(document.querySelector('canvas'), 'sample.png');

JavaScript

/**
 * URLからダウンロード
 * @param {string} url ダウンロードするURL
 * @param {string} fileName ファイル名
 */
const downloadFromURL = async (url, fileName) => {
	const response = await fetch(url);

	if (response.status === 200) {
		const blob = await response.blob();

		// a要素の生成
		const anchorElem = document.body.appendChild(document.createElement('a'));
		anchorElem.setAttribute('href', URL.createObjectURL(blob));
		anchorElem.setAttribute('target', '_blank');
		anchorElem.setAttribute('download', fileName);
		anchorElem.style.visibility = 'hidden';

		// イベント実行
		anchorElem.dispatchEvent(new MouseEvent('click', {
			view       : window,
			bubbles    : false,
			cancelable : false
		}));

		document.body.removeChild(anchorElem);
	} else {
		alert('対象ファイルのアクセスに失敗しました。');
	}
};

// ダウンロード実行
downloadFromURL('https://www.example.co.jp/foo/bar.png', 'sample.png');