JSを使用してHTMLブラウザのエクスポートとダウンロードを作成する方法

この記事では、主に HTML5 の download 属性と Blob を使用して HTML ブラウザーのエクスポート ダウンロードを作成する方法を説明します。

URL.createObjectURL

URL.createObjectURL() メソッドは、渡されたパラメーターに基づいてパラメーター オブジェクトを指す URL を作成します。この URL の有効期間は、その URL が作成されたドキュメント内にのみ存在します。実行された File オブジェクトまたは Blob オブジェクトを指します。

objectURL = URL.createObjectURL(blob || file);1

File オブジェクトまたは Blob オブジェクト
ここで、File オブジェクトと Blob オブジェクトについて簡単に説明します。
File オブジェクトはファイルをアップロードするために input type="file" タグを使用する場合、その中の各ファイルは File オブジェクトになります。たとえば、new Blob() によって作成されたオブジェクトは Blob オブジェクトです。別の例として、XMLHttpRequest では、responseType が blob である場合、戻り値も blob オブジェクトになります。
*注意
createObjectURL が呼び出されるたびに、同じ URL オブジェクトが既に作成されている場合でも、新しい URL オブジェクトが作成されます。このオブジェクトが不要になった場合は、URL.revokeObjectURL() メソッドを使用する必要があります。ページが閉じられるとブラウザによって自動的に解放されますが、パフォーマンスとメモリ使用量を最適化するために、必ず解放してください。準備ができたら、それを解放する必要があります。このオブジェクト URL を使用した場合、

URL.revokeObjectURL

URL.revokeObjectURL() メソッドは、このオブジェクト URL を解放します。この URL が対応するファイルを指す必要がなくなったことをブラウザが認識すると、このメソッドを呼び出す必要があります。具体的な意味は、オブジェクト URL がこの URL を使用して指定されたファイルにアクセスできるということですが、アクセスできるのはそれだけです。一度アクセスすると、オブジェクト URL は必要なくなり、解放されます。

たとえば、画像の場合、オブジェクト URL を作成しました。次に、このオブジェクト URL を通じて、この画像をページにロードしました。画像はロードされており、この画像を再度ロードする必要はないため、このオブジェクト URL を解放すると、この URL はこの画像をポイントしなくなります。

window.URL.revokeObjectURL(objectURL);1

ファイルのダウンロード方法

var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();    // 然后移除
    document.body.removeChild(eleLink);
};

関連推奨事項:

html ブラウザーで文字化けした code_html/css_WEB-ITnose が表示される

以上がJSを使用してHTMLブラウザのエクスポートとダウンロードを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。