jsマルチファイルの一括ダウンロードを実現

6454 ワード

互換性に関する質問:　　　　 ，；，IE ， target='_blank'。

2019.8.19より

単一ファイルの一括ダウンロード
方法一:H 5 新しいプロパティ
HTML 5にはのラベルにdownloadの属性が追加されており、ダウンロード機能を簡単に利用することができます.downloadのプロパティ値はオプションで、ダウンロードファイルのファイル名を指定します.

Download file

　　
方法2:js
jsの実現の構想は:
1、タブを追加

JavaScriptで非表示のラベル

を作成

hrefプロパティ

を設定

downloadプロパティ

を設定

JavaScriptでこのclickイベント

をトリガー
実装コード:jqueryが導入すると仮定する.js

var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'what-you-want.txt';
a.href = url;
a.download = filename;
a.click();
a.remove(); //

2、H 5の新しい特性を使わない場合、動的にを追加する

は独立してウィンドウを開き、要求を開始します.要求が完了すると、インタフェースは自動的に閉じます.

1 var frame = $(''<span style="color:#000000;">);
</span><span style="color:#008080;">2</span> frame.attr('src'<span style="color:#000000;">, url);
</span><span style="color:#008080;">3</span> <span style="color:#000000;">$(document.body).append(frame);
</span><span style="color:#008080;">4</span> setTimeout(<span style="color:#0000ff;">function</span><span style="color:#000000;">() {
</span><span style="color:#008080;">5</span> <span style="color:#000000;">  frame.remove();
</span><span style="color:#008080;">6</span> }, 1000);</code></pre>  <br></div> <br><p> </p> <br><h 3>  IE 360  モード:</h 3><br><p>ファイルがそうでない  .png .gif .jpgという  フォーマットはwindowを  することができる.Open(url,'_blank')ダウンロード.</p> <br><div class="cnblogs_code"> <pre><code>   <span style="color:#0000ff;">function</span><span style="color:#000000;"> isIE () {
      </span><span style="color:#0000ff;">if</span> (!!window.ActiveXObject || 'ActiveXObject' <span style="color:#0000ff;">in</span><span style="color:#000000;"> window) {
        </span><span style="color:#0000ff;">return</span> <span style="color:#0000ff;">true</span><span style="color:#000000;">
      } </span><span style="color:#0000ff;">else</span><span style="color:#000000;"> {
        </span><span style="color:#0000ff;">return</span> <span style="color:#0000ff;">false</span><span style="color:#000000;">
      }
    },

</span><span style="color:#0000ff;">   function</span><span style="color:#000000;"> download () {
      let url </span>= '../../../static/cds/files/          .docx'
      <span style="color:#0000ff;">if</span> (<span style="color:#0000ff;">this</span>.isIE()) { <span style="color:#008000;">//</span><span style="color:#008000;"> IE</span>
        window.open(url, '_blank'<span style="color:#000000;">)
      } </span><span style="color:#0000ff;">else</span><span style="color:#000000;"> {
        let a </span>= document.createElement('a') <span style="color:#008000;">//</span><span style="color:#008000;">   a  </span>
        let e = document.createEvent('MouseEvents') <span style="color:#008000;">//</span><span style="color:#008000;">         </span>
        e.initEvent('click', <span style="color:#0000ff;">false</span>, <span style="color:#0000ff;">false</span>) <span style="color:#008000;">//</span><span style="color:#008000;">        </span>
        a.href = url <span style="color:#008000;">//</span><span style="color:#008000;">       </span>
        a.download = 'xxxx ' <span style="color:#008000;">//</span><span style="color:#008000;">        </span>
<span style="color:#000000;">        a.dispatchEvent(e)
      }
    },</span></code></pre>  <br></div> <br><p> </p> <br><h 3>  のファイルを  ダウンロード:</h 3><br><p>  :urlを1つの  に  し、  をループしてダウンロードをトリガーする:</p><br><div class="cnblogs_code"> <pre><code>      let files = ['url1', 'url2'] <span style="color:#008000;">//</span><span style="color:#008000;">     </span>
      files.<strong>forEach</strong>(url =&gt;<span style="color:#000000;"> {
        </span><span style="color:#0000ff;">if</span> (<span style="color:#0000ff;">this</span>.isIE()) { <span style="color:#008000;">//</span><span style="color:#008000;"> IE</span>
          window.open(url, '_blank'<span style="color:#000000;">)
        } </span><span style="color:#0000ff;">else</span><span style="color:#000000;"> {
          let a </span>= document.createElement('a') <span style="color:#008000;">//</span><span style="color:#008000;">   a  </span>
          let e = document.createEvent('MouseEvents') <span style="color:#008000;">//</span><span style="color:#008000;">         </span>
          e.initEvent('click', <span style="color:#0000ff;">false</span>, <span style="color:#0000ff;">false</span>) <span style="color:#008000;">//</span><span style="color:#008000;">        </span>
          a.href = url <span style="color:#008000;">//</span><span style="color:#008000;">       </span>
          a.download = '' <span style="color:#008000;">//</span><span style="color:#008000;">        </span>
<span style="color:#000000;">          a.dispatchEvent(e)
        }
      })</span></code></pre>  <br></div> <br><p> </p> <br><p> </p> <br><p>リファレンスリンク:</p><br><div><br>https://www.npmjs.com/package/ly-downloader <br></div> <br><div><br>https://www.jianshu.com/p/2e60c15c328a <br></div> <br><div><br>https://www.jianshu.com/p/5f9027722204 <br></div> <br><div><br>https://segmentfault.com/a/1190000005863250 <br></div> <br><div><br>https://yugasun.com/post/optimize-download-files-in-frontend.html <br></div> <br><div><br>https://segmentfault.com/q/1010000012022240 <br></div> <br><div><br>https://www.jq22.com/webqd4287 <br></div> <br><p> </p> <br></div> <br><p>   :https://www.cnblogs.com/zhangym118/p/11352164.html</p> <br></div> <br></div><br></div><br></div>

Vuex永続化プラグイン(vuex-persistedstate)-リフレッシュデータの消失の問題を解決

html marqueeラベル説明