Comment transférer le format d'un document dans vue

Avec la popularité des applications Web modernes, l'utilisation de frameworks front-end est devenue de plus en plus courante, parmi lesquels le framework vue a été largement utilisé dans le domaine du développement front-end. Dans vue, il est souvent nécessaire de transmettre différents types de données, y compris les formats de document. Nous explorerons ensuite comment transmettre des formats de document dans vue.

La première étape pour fournir un format de document consiste à créer une URL pour le document. Une URL est une adresse utilisée pour récupérer des informations à partir d'un serveur Web et peut transférer différents types de fichiers vers le client. En vue, nous pouvons utiliser vue-router pour gérer la relation entre les URL et les vues afin de réaliser la livraison de documents. Dans vue-router, nous pouvons utiliser des paramètres de routage pour créer dynamiquement des URL.

Par exemple, disons que nous avons un composant de liste de documents qui affiche tous les documents sur le serveur. Nous souhaitons transmettre une URL pointant vers un document spécifique à télécharger. Nous pouvons utiliser les paramètres de route pour créer une URL :

<template>
  <div>
    <ul>
      <li v-for="doc in documentList" :key="doc.id">
        <router-link :to="{ name: &#39;document&#39;, params: { id: doc.id } }">
          {{ doc.title }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'DocumentList',
  data() {
    return {
      documentList: [
        {
          id: 1,
          title: 'Document 1',
          url: '/documents/1.docx',
        },
        {
          id: 2,
          title: 'Document 2',
          url: '/documents/2.pdf',
        },
      ],
    };
  },
};
</script>

Dans le code ci-dessus, nous utilisons la fonction de paramètre de route de vue-router pour créer une URL pointant vers un document spécifique. Cette URL transmet l'ID du document en tant que paramètre, puis nous pouvons créer le document à renvoyer en fonction de cet ID sur le backend.

Côté serveur, nous pouvons utiliser Node.js et Express pour écrire des gestionnaires de routage :

const express = require('express');
const router = express.Router();

router.get('/documents/:id', function (req, res) {
  const docId = req.params.id;
  // 根据ID查找文档
  res.download(`./documents/${docId}.docx`);
});

Dans le code ci-dessus, nous utilisons la fonction de routage d'Express pour mapper les requêtes avec des ID de document aux chemins de document supérieurs correspondants. Enfin, nous renvoyons le document au client selon la méthode Express res.download.

Dans vue, on peut utiliser la bibliothèque axios pour envoyer des requêtes au backend et récupérer les documents renvoyés par le serveur. Vous pouvez utiliser la méthode get d'axios pour obtenir le document sur le serveur, puis utiliser la fonction de téléchargement du navigateur pour télécharger le document.

<template>
  <div>
    <button @click="downloadDocument(documentUrl)">下载文档</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Document',
  data() {
    return {
      documentUrl: '',
    };
  },
  created() {
    const id = this.$route.params.id;
    axios.get(`/documents/${id}`).then((response) => {
      this.documentUrl = response.request.responseURL;
    });
  },
  methods: {
    downloadDocument(url) {
      window.location.href = url;
    },
  },
};
</script>

Dans le code ci-dessus, nous appelons directement la bibliothèque axios dans vue et utilisons la méthode get pour envoyer une requête get au backend pour obtenir le document. Une fois que nous avons l'url du document, nous pouvons ouvrir le document directement dans le navigateur pour le télécharger.

Résumé :

La meilleure façon de transmettre le format de document dans Vue est d'abord de créer l'URL du document sur le serveur, puis d'utiliser axios dans vue pour obtenir le contenu du document à partir du serveur. Le moyen le plus simple de télécharger un document dans Vue consiste à ouvrir l'URL du document directement dans le navigateur à l'aide de window.location.href. J'espère que cet article pourra vous aider à comprendre comment transférer des formats de documents dans Vue, vous rendant ainsi plus à l'aise dans le développement Web.

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!