Bagaimana untuk memuat turun fail dalam vue

Terdapat dua cara utama untuk memuat turun fail: menggunakan kaedah window.open(): buat teg tersembunyi, tetapkan sifat muat turun dan klik padanya untuk mencetuskan muat turun. Gunakan perpustakaan pihak ketiga: seperti Muat Turun Fail Vue, Muat Turun Vue, Muat Turun Vue, dll. Perpustakaan ini menyediakan cara yang lebih mudah untuk memuat turun fail.

Cara memuat turun fail menggunakan Vue.js

Memuat turun fail

Terdapat dua cara utama untuk memuat turun fail menggunakan Vue.js:

>
• code> kaedahwindow.open() 方法
• 使用第三方库

方法 1：使用 window.open()

Gunakan perpustakaan pihak ketiga

Kaedah 1: Gunakan kaedah window.open()

Kaedah ini boleh memuat turun fail dengan membuka fail terus dalam pelayar itu.

<code class="javascript">// 使用下载属性创建隐藏的 <a> 标签
const link = document.createElement('a');
link.href = fileUrl;
link.setAttribute('download', fileName);
link.style.display = 'none';

// 将 <a> 标签添加到 DOM 中
document.body.appendChild(link);

// 单击 <a> 标签以下载文件
link.click();

// 从 DOM 中删除 <a> 标签
document.body.removeChild(link);</code>

Kaedah 2: Gunakan perpustakaan pihak ketiga

Terdapat banyak perpustakaan pihak ketiga Vue.js yang boleh memudahkan proses muat turun, seperti:

Muat Turun Fail Vue

Vue-Downloader

🎜🎜Pustaka ini menyediakan cara yang lebih mudah untuk mencetuskan muat turun semasa mengendalikan jenis fail, nama fail dan penjejakan kemajuan. 🎜🎜🎜Contoh: Menggunakan Muat Turun Fail Vue🎜🎜

<code class="javascript">import VueFileDownload from 'vue-file-download';

// 在 Vue 实例中使用库
export default {
  methods: {
    downloadFile() {
      VueFileDownload.downloadFile({
        url: fileUrl,
        fileName: fileName,
        mimeType: fileMimeType
      });
    }
  }
};</code>

Atas ialah kandungan terperinci Bagaimana untuk memuat turun fail dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!