Atur nama file unduh javascript

Question

Hasilkan dan unduh file menggunakan Javascript ?

Table of Contents Show

Fungsi unduhan yang diterapkan sendiri
Menggunakan perpustakaan
Safari 6. 1+
Bagaimana cara mengubah nama file saat mengunduh JavaScript?
Bagaimana cara mendapatkan nama file yang diunduh dalam JavaScript?
Bagaimana cara mengubah nama unduhan suatu file?
Bagaimana cara mengunduh file dalam JavaScript?

Bayangkan Anda menggunakan Google Chrome dan Anda telah mengaktifkan opsi "Buka otomatis file yang diunduh", dan untuk nasib buruk Anda, Anda masuk ke situs web jahat dan itu menghasilkan unduhan file yang tidak dikenal. Anda tahu bagaimana cerita ini berakhir

Namun, di browser terbaru ekstensi file yang tidak diketahui atau jarang diunduh diblokir dan prompt muncul jika Anda benar-benar ingin membuka file itu (setidaknya di Chrome)

Oleh karena itu, pengunduhan file secara otomatis sulit dicapai dalam beberapa tahun terakhir, tetapi sekarang dengan diperkenalkannya HTML5, tugas ini menjadi lebih mudah untuk dicapai.

Pada artikel ini kami akan menunjukkan kepada Anda beberapa trik untuk membuat dan mengunduh file secara langsung menggunakan Javascript murni

Fungsi unduhan yang diterapkan sendiri

Fungsi sederhana berikut memungkinkan Anda menghasilkan unduhan file langsung di browser tanpa menghubungi server mana pun. Ia bekerja pada semua browser Siap HTML5 karena menggunakan atribut unduh dari elemen <a>

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
download("hello.txt","This is the content of my file :)");

Atribut unduhan menentukan bahwa target akan diunduh ketika pengguna mengklik hyperlink. Atribut ini hanya digunakan jika atribut href disetel

Anda dapat melihat cuplikan ini beraksi di biola berikut

Menggunakan perpustakaan

Buat perpustakaan, bukan perang. FileSaver. js mengimplementasikan antarmuka saveAs()_ FileSaver di browser yang tidak mendukungnya secara asli

Jika Anda perlu menyimpan file yang sangat besar lebih besar dari batasan ukuran blob atau tidak memiliki cukup RAM, lihat StreamSaver yang lebih canggih. js yang dapat menyimpan data langsung ke hard drive secara asinkron dengan kekuatan API aliran baru. Itu akan memiliki dukungan untuk kemajuan, pembatalan dan mengetahui kapan selesai menulis.

Cuplikan berikut memungkinkan Anda membuat file (dengan ekstensi apa pun) dan mengunduhnya tanpa menghubungi server apa pun

var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";

var blob = new Blob([content], {
 type: "text/plain;charset=utf-8"
});

saveAs(blob, filename);

_

Tabel berikut menunjukkan kompatibilitas FileSaver. js di browser yang berbeda

BrowserBentuk sebagai namaFileUkuran GumpalanMaksDependensiFirefox 20+BlobYa800 MiBNoneFirefox < 20data. URINon/aBlob. jsChromeBlobYes500 MiBNoneChrome untuk AndroidBlobYes500 MiBNoneEdgeBlobYes?NoneIE 10+BlobYes600 MiBNoneOpera 15+BlobYes500 MiBNoneOpera < 15data. URINon/aBlob. jsSafari 6. 1+*BlobNo?NoneSafari < 6data. URINon/aBlob. js

Catatan. meskipun mendukung browser terbaru, ada beberapa trik yang perlu Anda ketahui untuk memberikan dukungan penuh

yaitu < 10

Dimungkinkan untuk menyimpan file teks di IE <10 tanpa polyfill berbasis Flash. Lihat untuk detail lebih lanjut

Safari 6. 1+

Gumpalan terkadang dapat dibuka alih-alih disimpan—Anda mungkin harus mengarahkan pengguna Safari untuk menekan ?+S secara manual untuk menyimpan file setelah dibuka. Menggunakan jenis MIME application/octet-stream_ untuk memaksa pengunduhan

iOS

saveA harus dijalankan dalam peristiwa interaksi pengguna seperti onTouchDown atau onClick; . Karena pembatasan di iOS, saveA terbuka di jendela baru alih-alih mengunduh, jika Anda ingin memperbaikinya, beri tahu Apple bagaimana bug ini memengaruhi Anda

Fungsi download()_ dari downloads API mengunduh file, mengingat URL-nya dan preferensi opsional lainnya

Jika URL menggunakan protokol HTTP atau HTTPS, permintaan menyertakan semua cookie yang relevan, yaitu cookie yang disetel untuk nama host URL, flag aman, jalur, dan seterusnya. Cookie default, cookie dari sesi penelusuran normal, digunakan kecuali

opsi incognito_ digunakan, kemudian cookie penjelajahan pribadi digunakan
opsi cookieStoreId digunakan, lalu cookie dari toko yang ditentukan digunakan

Jika filename dan saveAs ditentukan, dialog Simpan Sebagai ditampilkan, diisi dengan filename

Ini adalah fungsi asinkron yang mengembalikan Promise

let downloading = browser.downloads.download(
  options                   // object
)

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

0

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

_1 yang menentukan file apa yang ingin Anda unduh, dan preferensi lain yang ingin Anda atur terkait unduhan. Itu dapat berisi properti berikut

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

2 Opsional

Tanda

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

3 yang memungkinkan pengunduhan untuk dilanjutkan meskipun mengalami kesalahan HTTP. Menggunakan flag ini, misalnya, memungkinkan pengunduhan halaman kesalahan server. Nilai default

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

_4. Ketika diatur ke

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

4, unduhan dibatalkan saat menemukan kesalahan HTTP

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

6, pengunduhan berlanjut saat terjadi kesalahan HTTP dan kesalahan server HTTP tidak dilaporkan. Namun, jika unduhan gagal karena kesalahan terkait file, terkait jaringan, terkait pengguna, atau lainnya, kesalahan tersebut akan dilaporkan

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

7 Opsional

A

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

8 yang mewakili badan kiriman permintaan

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

9 Opsional

Sebuah string yang mewakili tindakan yang ingin Anda ambil jika ada konflik nama file, seperti yang didefinisikan dalam tipe download()0 (default pada "uniquify" ketika tidak ditentukan)

cookieStoreId Opsional

ID penyimpanan cookie dari identitas kontekstual yang dikaitkan dengan pengunduhan. Jika dihilangkan, penyimpanan cookie default akan digunakan. Penggunaan membutuhkan "cookies"

filename Opsional

A

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

8 mewakili jalur file relatif terhadap direktori unduhan default — ini menyediakan lokasi tempat Anda ingin menyimpan file, dan nama file apa yang ingin Anda gunakan. Jalur absolut, jalur kosong, komponen jalur yang dimulai dan/atau diakhiri dengan titik (. ), dan jalur yang berisi referensi balik (download()4) akan menyebabkan kesalahan. Jika dihilangkan, nilai ini akan default ke nama file yang sudah diberikan ke file unduhan, dan lokasi tepat di dalam direktori unduhan

download()5 Opsional

Jika URL menggunakan protokol HTTP atau HTTPS, download()6 dari download()7 mewakili header HTTP tambahan untuk dikirimkan bersama permintaan. Setiap header direpresentasikan sebagai objek kamus yang berisi kunci download()8 dan download()9 atau downloads0. Header yang dilarang oleh downloads1 dan downloads2 tidak dapat ditentukan, namun, Firefox 70 dan yang lebih baru memungkinkan penggunaan header downloads3. Mencoba menggunakan tajuk terlarang akan menimbulkan kesalahan

incognito Opsional

A

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

_3. jika ada dan disetel ke true, kaitkan unduhan ini dengan sesi penjelajahan pribadi. Artinya, itu hanya akan muncul di pengelola unduhan untuk jendela pribadi apa pun yang saat ini terbuka

downloads6 Opsional

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

8 mewakili metode HTTP untuk digunakan jika downloads8 menggunakan protokol HTTP[S]. Ini mungkin "GET" atau "POST"

saveAs Opsional

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

3 yang menentukan apakah akan menyediakan dialog pemilih file untuk mengizinkan pengguna memilih nama file (

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

6), atau tidak (

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

4)

Jika opsi ini dihilangkan, browser akan menampilkan pemilih file atau tidak berdasarkan preferensi pengguna umum untuk perilaku ini (di Firefox, preferensi ini diberi label "Selalu tanya Anda di mana menyimpan file" di sekitar. preferensi, atau incognito_3 di sekitar. konfigurasi)

Catatan. Firefox untuk Android memunculkan kesalahan jika saveAs disetel ke

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

6. Parameter diabaikan ketika saveAs adalah

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

4 atau tidak disertakan

downloads_8

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

8 mewakili URL untuk diunduh

APromise. Jika pengunduhan berhasil dimulai, janji akan dipenuhi dengan cookieStoreId1 dari cookieStoreId2 baru. Jika tidak, janji akan ditolak dengan pesan kesalahan yang diambil dari cookieStoreId3

Jika Anda menggunakan URL. createObjectURL() untuk mengunduh data yang dibuat dalam JavaScript dan Anda ingin mencabut URL objek (dengan revokeObjectURL) nanti (seperti yang sangat disarankan), Anda harus melakukannya setelah unduhan selesai. Untuk melakukannya, dengarkan unduhan. acara onChanged

Tabel BCD hanya dimuat di browser dengan JavaScript diaktifkan. Aktifkan JavaScript untuk melihat data

Cuplikan berikut mencoba mengunduh file contoh, juga menentukan nama file dan lokasi untuk menyimpannya, dan cookieStoreId4 sebagai nilai opsi

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

let downloadUrl = "https://example.org/image.png";

let downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

9

Bagaimana cara mengubah nama file saat mengunduh JavaScript?

Anda dapat mengaktifkan unduhan opsi jalur berbeda di browser Anda. Kemudian Anda dapat mengganti nama file menggunakan aktivitas typeinto untuk mengetik path dengan nama file baru selama eksekusi .