cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan fungsi muat turun dalam javascript

Bagaimana untuk melaksanakan fungsi muat turun dalam javascript

藏色散人
藏色散人asal
2023-02-10 09:18:193765semak imbas

Cara melaksanakan fungsi muat turun dalam JavaScript: 1. Muat turun melalui tag; 2. Muat turun melalui kaedah "window.open" 3. Muat turun melalui kaedah "location.href"; pemindahan fail Objek gumpalan melaksanakan fungsi muat turun.

Bagaimana untuk melaksanakan fungsi muat turun dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi javascript 1.8.5, komputer Dell G3.

Bagaimana untuk melaksanakan fungsi muat turun dalam javascript?

js melaksanakan fungsi muat turun fail

1 muat turun teg

<body>
<button onClick="download()">a标签下载</button>
<script>
function download(url = &#39;http:www.xxx.com/download?name=file.pdf&#39;, fileName = &#39;未知文件&#39;) {
      const a = document.createElement(&#39;a&#39;);
      a.style.display = &#39;none&#39;;
      a.setAttribute(&#39;target&#39;, &#39;_blank&#39;);
      /*
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      fileName && a.setAttribute(&#39;download&#39;, fileName);
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
</script>
</body>

Kelebihan:

  • Anda boleh memuat turun terus txt, png, pdf, exe, xlsx dan jenis fail lain

Kelemahan:

  • teg hanya boleh digunakan mendapatkan permintaan, jadi url mempunyai had panjang

  • Tidak dapat mendapatkan kemajuan muat turun

  • Sekatan merentas domain

  • Tidak dapat membawa token dalam pengepala untuk operasi pengesahan

  • Tidak dapat menentukan sama ada antara muka berjaya

  • Isu keserasian IE

2 Muat turun tetingkap.buka 

<body>
  <button onclick="download(&#39;http://www.xxx.com/download?name=file.pdf&#39;)">window.open下载</button>
  <script>
    function download(url) {
      window.open(url, &#39;_self&#39;);
      /**
       *  _blank：在新窗口显示目标网页
       *  _self：在当前窗口显示目标网页
       *  _top：框架网页中在上部窗口中显示目标网页
      /**
    }
  </script>
</body>
Kelebihan:

  • Mudah dan mudah

    • Kelemahan:

    Akan ada masalah had panjang URL

    • Anda perlu memberi perhatian kepada masalah pengekodan url

    • Tidak dapat mendapatkan Kemajuan muat turun

    • Tidak dapat membawa token dalam pengepala untuk operasi pengesahan

    • Tidak dapat menentukan sama ada antara muka berjaya

    • Tidak boleh memuat turun terus jenis fail yang boleh dipratonton terus oleh penyemak imbas (txt, png, pdf akan dipratonton terus)

    • 3 Muat turun lokasi.href

Kelebihan
<body>
  <button onclick="download(&#39;http://www.xxx.com/download?name=file.pdf&#39;)">location.href下载
  </button>
  <script>
    function download(url) {
      window.location.href = url;
    }
  </script>
</body>

    Mudah, mudah dan langsung

  • Boleh memuat turun fail besar (G atau lebih)

  • Kelemahan

Akan ada panjang URL masalah had

  • Anda perlu memberi perhatian kepada masalah pengekodan url

  • Tidak dapat mendapatkan kemajuan muat turun

  • Tidak boleh membawa token dalam pengepala untuk operasi pengesahan

  • Tidak boleh memuat turun terus jenis fail yang boleh dipratonton terus oleh penyemak imbas (txt, png, pdf akan dipratonton terus)

  • Adalah mustahil untuk menilai sama ada antara muka berjaya dikembalikan

  • 3 Muat turun objek gumpalan pemindahan fail

Kelebihan : 

 <button onclick="download()">文件流转blob对象下载</button>
 <script>
 download() {
 axios({
 url: &#39;http://www.xxx.com/download&#39;,
 method: &#39;get&#39;,
 responseType: &#39;blob&#39;,
 }).then(res => {
 const fileName = res.headers.content-disposition.split(&#39;;&#39;)[1].split(&#39;filename=&#39;)[1];
 const filestream = res.data;  // 返回的文件流
 // {type: &#39;application/vnd.ms-excel&#39;}指定对应文件类型为.XLS (.XLS的缩写就为application/vnd.ms-excel)
 const blob = new Blob([filestream], {type: &#39;application/vnd.ms-excel&#39;});
 const a = document.createElement(&#39;a&#39;);
 const href = window.URL.createObjectURL(blob); // 创建下载连接
    a.href = href;
    a.download = decodeURL(fileName );
    document.body.appendChild(a);
        a.click();
        document.body.removeChild(a); // 下载完移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
 })
 }
 </script>

Anda boleh memuat turun txt, png, pdf dan jenis fail lain

  • Anda boleh membawa token dalam pengepala untuk operasi pengesahan

  • Anda boleh mendapatkan kemajuan muat turun fail

  • Anda boleh menilai sama ada antara muka kembali berjaya

  • Kelemahan :

Isu keserasian, tidak tersedia di bawah IE10, sila perhatikan penyemak imbas Safari, laman web rasmi menyatakan bahawa Safari mempunyai masalah serius dengan gumpalan yang merupakan jenis aplikasi/strim oktet

  • Dapatkan semua strim fail dikembalikan oleh bahagian belakang sebelum memuat turun

  • Pembelajaran yang disyorkan: "
    • Tutorial Video JavaScript
"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi muat turun dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript safari Token 接口 JS 对象 location href issue
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk menukar tarikh kepada nombor dalam javascriptArtikel seterusnya：Bagaimana untuk menukar tarikh kepada nombor dalam javascript

Artikel berkaitan

Lihat lagi