Bagaimana untuk Muat Turun URL Data dalam JavaScript: Penyelesaian Chrome dan Firefox?

Memuat turun URL Data dalam JavaScript

Dalam percubaan untuk mencipta utiliti zip/nyahzip berasaskan JavaScript, anda telah menghadapi masalah dengan memuat turun fail yang dikodkan dalam URL data. Walaupun pendekatan ini berfungsi dalam Firefox, ia gagal dalam Chrome.

Dilema Chrome

Chrome tidak menyokong muat turun terus URL data. Sebaliknya, ia membenamkannya sebagai imej apabila dirujuk menggunakan teg img. Ini menimbulkan masalah untuk format fail bukan imej.

Penyelesaian

Nasib baik, ada penyelesaian untuk mendayakan muat turun URL data dalam Chrome dan Firefox. Penyelesaiannya melibatkan mencipta elemen sementara, menetapkan atribut muat turunnya kepada nama fail yang diingini dan memberikan URL data kepada atribut hrefnya.

Contoh Kod

Yang berikut Fungsi JavaScript, muat turunURI, melaksanakan ini penyelesaian:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

Penggunaan

Untuk menggunakan fungsi ini, sediakan URL data dan nama fail muat turun yang dikehendaki sebagai argumen:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

Pendekatan ini akan menggesa dialog muat turun dalam kedua-dua Chrome dan Firefox, membolehkan pengguna menyimpan fail dengan nama fail yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Muat Turun URL Data dalam JavaScript: Penyelesaian Chrome dan Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!