63

現在、私はcanvasそれをPNGとして保存したいと考えています。手の込んだ複雑なファイル システム API を使ってそれを行うことはできますが、あまり好きではありません。

download属性を持つリンクがあるかどうかはわかっています：

<a href="img.png" download="output.png">Download</a>

ユーザーがファイルをクリックすると、ファイルがダウンロードされます。したがって、私はこれを思いつきました：

$("<a>")
    .attr("href", "img.png")
    .attr("download", "output.png")
    .appendTo("body")
    .click()
    .remove();

デモ: http://jsfiddle.net/DerekL/Wx7wn/

しかし、うまくいかないようです。ユーザーアクションによってトリガーする必要がありますか? または、なぜそれが機能しなかったのですか？

4

2 に答える 2

82

The problem is that jQuery doesn't trigger the native click event for <a> elements so that navigation doesn't happen (the normal behavior of an <a>), so you need to do that manually. For almost all other scenarios, the native DOM event is triggered (at least attempted to - it's in a try/catch).

To trigger it manually, try:

var a = $("<a>")
    .attr("href", "http://i.stack.imgur.com/L8rHf.png")
    .attr("download", "img.png")
    .appendTo("body");

a[0].click();

a.remove();

DEMO: http://jsfiddle.net/HTggQ/

Relevant line in current jQuery source: https://github.com/jquery/jquery/blob/1.11.1/src/event.js#L332

if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&
        jQuery.acceptData( elem ) ) {
于 2013-06-26T04:43:59.753 に答える