Vue.js Firebase：如何在方法内获取数据并遍历生成TXT文件

Hey there! Let's get your Firebase books data into that file.txt easily. Since you're already using Vue's Firebase binding, your books data is already available in your component—you just need to access and format it properly. Here's how to adjust your code:

Step 1: Access your Firebase data #

You've already set up the Firebase binding with firebase: { books: booksRef }, which means the books data is directly accessible via this.books in your component methods.

Step 2: Format the data for your text file #

Firebase Realtime Database returns list data as an object (with unique keys as properties), so first we'll convert it to an array using Object.values(), then format each book into a readable string. You can tweak the format to match what you need!

Step 3: Update your downloadFile method #

Replace your current downloadFile method with this:

methods: {
  downloadFile: function() {
    // Check if we have books data first
    if (!this.books) {
      alert("No data to export!");
      return;
    }

    // Convert Firebase's object-based data to an array of book objects
    const booksArray = Object.values(this.books);

    // Format each book into a string (customize this part to your liking)
    const textContent = booksArray.map(book => {
      return `Title: ${book.title}\nAuthor: ${book.author}\nGenre: ${book.genre}\n---\n`;
    }).join('');

    // Create the blob and trigger the download
    let blob = new Blob([textContent], { type: 'text/plain;charset=utf-8' });
    saveAs(blob, 'file.txt');
  }
}

Notes to keep in mind: #

• Make sure you've imported saveAs correctly at the top of your component:

  import saveAs from 'save-as';
  

• If your books data is already an array (unlikely with Firebase default bindings, but possible if you configured it differently), you can skip the Object.values() step and use this.books directly.
• Feel free to adjust the map function to change how each book is displayed in the text file—add more fields, change the separator, or even format it as JSON if that's what you need.

Just call this method from a button in your template (like <button @click="downloadFile">Export Books</button>) and it should generate your text file with all the Firebase data!

内容的提问来源于stack exchange，提问作者Fabio Neto da Silva