Comment télécharger des fichiers dans vue

Il existe deux manières principales de télécharger des fichiers : en utilisant la méthode window.open() : créez une balise cachée, définissez les propriétés de téléchargement et cliquez dessus pour déclencher le téléchargement. Utilisez des bibliothèques tierces : telles que Vue File Download, Vue Download, Vue-Downloader, etc. Ces bibliothèques offrent un moyen plus simple de télécharger des fichiers. Comment télécharger des fichiers à l'aide de Vue.js code>

Utiliser une bibliothèque tierce

Méthode 1 : Utiliser la méthode window.open()

Cette méthode peut télécharger des fichiers en ouvrant le fichier directement dans le navigateur.

<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>

Méthode 2 : Utiliser des bibliothèques tierces

• Il existe de nombreuses bibliothèques tierces Vue.js qui peuvent simplifier le processus de téléchargement, telles que : window.open() 方法
• 使用第三方库

方法 1：使用 window.open()

Vue File Download

Vue Download

Vue-Downloader
Ces bibliothèques offrent un moyen plus simple de déclencher des téléchargements tout en gérant les types de fichiers, les noms de fichiers et le suivi de la progression.
• Exemple : Utilisation du téléchargement de fichiers Vue

• <code class="javascript">import VueFileDownload from 'vue-file-download';
  
  // 在 Vue 实例中使用库
  export default {
    methods: {
      downloadFile() {
        VueFileDownload.downloadFile({
          url: fileUrl,
          fileName: fileName,
          mimeType: fileMimeType
        });
      }
    }
  };</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!