26

次の方法でデータ uri を使用してファイルをダウンロードしようとしています。 

<input type="button"
  onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"
  value="Download"/>

問題は、ダウンロードしたファイルの名前が常に「不明」であることです。ファイル名として使用しようとしているものは何でもです。これはファイルに名前を付ける正しい方法ですか? または何か他のことをする必要がありますか？

4

5 に答える 5

43

これが解決策です。必要な名前のdownloadアンカータグに属性を 追加するだけです。a

<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
  download="somedata.csv">Example</a>

別の解決策は、JQuery/Javascriptを使用することです

アンカーのダウンロードプロパティ

于 2012-12-17T13:08:31.347 に答える
5

Safari では、これを使用して、ユーザーにファイルを ⌘-S するように指示することができます。

window.open('data:text/csv;base64,' + encodeURI($window.btoa(content)));

それ以外の場合、これはFilesaver.jsを使用しますが、問題なく動作します:

    var downloadFile = function downloadFile(content, filename) {
      var supportsDownloadAttribute = 'download' in document.createElement('a');

      if(supportsDownloadAttribute) {
        var link = angular.element('<a/>');
        link.attr({
          href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(content)),
          target: '_blank',
          download: filename
        })[0].click();
        $timeout(function() {
          link.remove();
        }, 50);
      } else if(typeof safari !== 'undefined') {
        window.open('data:attachment/csv;charset=utf-8,' + encodeURI(content));
      } else {
        var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
        saveAs(blob, filename);
      }
    }

注：上記のコードにはAngularJSがいくつかありますが、簡単に除外できるはずです...

于 2015-04-08T06:59:01.040 に答える