So laden Sie Dateien in Vue herunter

Es gibt zwei Hauptmethoden zum Herunterladen von Dateien: Verwenden der Methode window.open(): Erstellen Sie ein verstecktes Tag, legen Sie die Download-Eigenschaften fest und klicken Sie darauf, um den Download auszulösen. Verwenden Sie Bibliotheken von Drittanbietern wie Vue File Download, Vue Download, Vue-Downloader usw. Diese Bibliotheken bieten eine einfachere Möglichkeit, Dateien herunterzuladen.

So laden Sie Dateien mit Vue.js herunter

Dateien herunterladen

Es gibt zwei Hauptmethoden, um Dateien mit Vue.js herunterzuladen:

• Verwenden Sie window.open() code>-Methode<code>window.open() 方法
• 使用第三方库

方法 1：使用 window.open()

Bibliothek eines Drittanbieters verwenden

Methode 1: Methode window.open() verwenden

Diese Methode kann Dateien herunterladen, indem die Datei direkt in geöffnet wird der Browser.

• // 使用下载属性创建隐藏的 <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);

  Methode 2: Bibliotheken von Drittanbietern verwenden
• Es gibt viele Vue.js-Bibliotheken von Drittanbietern, die den Downloadvorgang vereinfachen können, wie zum Beispiel:
• Vue-Datei-Download

Vue-Download

Vue-Downloader

🎜🎜🎜Diese Bibliotheken bieten eine einfachere Möglichkeit, Downloads auszulösen und gleichzeitig Dateitypen, Dateinamen und Fortschrittsverfolgung zu verwalten. 🎜🎜🎜Beispiel: Verwendung des Vue-Datei-Downloads🎜🎜

import VueFileDownload from 'vue-file-download';

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

Das obige ist der detaillierte Inhalt vonSo laden Sie Dateien in Vue herunter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!