### Install Vue JSON Excel 3

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Installs the vue-json-excel3 package using npm. This is the first step to integrate the component into your Vue 3 project.

```bash
npm install vue-json-excel3
```

--------------------------------

### Vue 3 JSON to Excel Export Setup

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

Demonstrates how to set up the vue-json-excel3 component in a Vue 3 application. It includes defining JSON fields for export, sample data, and mounting the Vue app. Dependencies include 'vue' and 'vue-json-excel3'.

```javascript
import { createApp } from 'vue'
import JsonExcel from "vue-json-excel3";

const app = new createApp({
  data(){
      return {
          json_fields: {
              "Complete name": "name",
                  City: "city",
                  Telephone: "phone.mobile",
                  "Telephone 2": {
                  field: "phone.landline",
                      callback: (value) => {
                      return `Landline Phone - ${value}`;
                  },
              },
          },
          json_data: [
              {
                  name: "Tony Peña",
                  city: "New York",
                  country: "United States",
                  birthdate: "1978-03-15",
                  phone: {
                      mobile: "1-541-754-3010",
                      landline: "(541) 754-3010",
                  },
              },
              {
                  name: "Thessaloniki",
                  city: "Athens",
                  country: "Greece",
                  birthdate: "1987-11-23",
                  phone: {
                      mobile: "+1 855 275 5071",
                      landline: "(2741) 2621-244",
                  },
              },
          ],
          json_meta: [
          [
              {
                  key: "charset",
                  value: "utf-8",
              },
          ],
      ],
      }
  },
  component:{
    downloadExcel:JsonExcel
  }
}).mount('#app');
```

--------------------------------

### Fetch Data On-Demand with Loading States (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Retrieve data from an API dynamically when the user initiates a download. This example uses axios for API calls and manages a loading state to provide user feedback during data retrieval. It demonstrates the use of before-generate and before-finish callbacks.

```vue
<template>
  <div>
    <download-excel
      class="btn"
      :fetch="fetchData"
      :fields="json_fields"
      :before-generate="startDownload"
      :before-finish="finishDownload"
      name="holidays.xls"
    >
      Download Holidays
    </download-excel>
    <div v-if="loading">Loading data...</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      loading: false,
      json_fields: {
        'Holiday Name': 'name',
        'Date': 'date',
        'Country': 'country'
      }
    }
  },
  methods: {
    async fetchData() {
      const response = await axios.get('https://api.example.com/holidays')
      return response.data.holidays
    },
    startDownload() {
      this.loading = true
      console.log('Starting download...')
    },
    finishDownload() {
      this.loading = false
      console.log('Download complete!')
    }
  }
}
</script>
```

--------------------------------

### Per-Column Headers Configuration (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

This example shows how to define custom headers for individual columns using the `per-columns-headers` attribute. This allows for more descriptive and user-friendly column titles in the exported file, overriding default behavior. It requires passing an array of strings for the headers.

```vue
<template>
  <download-excel
    :data="tableData"
    :per-columns-headers="columnHeaders"
    name="table-with-headers.xls"
  >
    Download Table
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      columnHeaders: ['ID', 'Product Name', 'Price ($)', 'Stock'],
      tableData: [
        { id: 1, product: 'Laptop', price: 1200, stock: 15 },
        { id: 2, product: 'Mouse', price: 25, stock: 150 },
        { id: 3, product: 'Keyboard', price: 75, stock: 80 }
      ]
    }
  }
}
</script>
```

--------------------------------

### Register Vue JSON Excel 3 Component Globally

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Registers the 'downloadExcel' component globally in a Vue 3 application after installation. This makes the component available throughout your project.

```javascript
import { createApp } from 'vue'
import JsonExcel from "vue-json-excel3"

const app = createApp({})
app.component("downloadExcel", JsonExcel)
app.mount('#app')
```

--------------------------------

### Debounced Downloads for Large Files (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

This example shows how to prevent multiple rapid clicks on the download button by using the `debounce` attribute. This is particularly useful for large datasets to avoid overwhelming the browser or server. The `debounce` attribute takes a delay in milliseconds.

```vue
<template>
  <download-excel
    :data="largeDataset"
    :debounce="1000"
    name="large-file.xls"
  >
    Download Large File
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      largeDataset: Array.from({ length: 10000 }, (_, i) => ({
        id: i + 1,
        name: `Record ${i + 1}`,
        value: Math.random() * 1000
      }))
    }
  }
}
</script>
```

--------------------------------

### Fetch Data on Demand for Excel Export (Vue.js)

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

Demonstrates how to dynamically fetch data from a server using the 'fetch' prop in vue-json-excel3. The 'fetchData' method uses axios to retrieve holiday data and returns it in a format suitable for Excel export. Includes setup for fields and before/after generation callbacks.

```javascript
<template>
  <div id="app">

    <hr>
    <h2>Fetch Example</h2>
    <downloadexcel
      class            = "btn"
      :fetch           = "fetchData"
      :fields          = "json_fields"
      :before-generate = "startDownload"
      :before-finish   = "finishDownload">
      Download Excel
    </downloadexcel>
  </div>
</template>

<script>
import downloadexcel from "vue-json-excel3";
import axios from 'axios';

export default {
  name: "App",
  components: {
    downloadexcel,
  },
  data(){
    return {
      json_fields: {
        'Complete name': 'name',
        'Date': 'date',
      },
    }
  }, //data
  methods:{
    async fetchData(){
      const response = await axios.get('https://holidayapi.com/v1/holidays?key=a4b2083b-1577-4acd-9408-6e529996b129&country=US&year=2017&month=09');
      console.log(response);
      return response.data.holidays;
    },
    startDownload(){
        alert('show loading');
    },
    finishDownload(){
        alert('hide loading');
    }
  }
};
</script>

```

--------------------------------

### Vue Component for Multi-line Cell Export

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

Provides a complete Vue component example demonstrating how to handle multi-line text values within a single cell when exporting to Excel. It shows the template and script setup, including data definition with newline characters in one of the values.

```vue
<template>
  <div>
    <json-excel :data="dataForExcel" />
  </div>
</template>
<script>
  import JsonExcel from "vue-json-excel3";

  export default {
    components: {
      JsonExcel,
    },
    data: () => {
      return {
        dataForExcel: [
          { colA: "Hello", colB: "World" },
          {
            colA: "Multi-line",
            /* Multi-line value: */
            colB:
              "This is a long paragraph\nwith multiple lines\nthat should show in a single cell.",
          },
          { colA: "Another", colB: "Regular cell" },
        ],
      };
    },
  };
</script>
```

--------------------------------

### Basic Export with All Fields in Vue

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Demonstrates a basic export of all fields from a JSON array to an Excel file using the 'downloadExcel' component. The 'userData' prop provides the data to be exported.

```vue
<template>
  <download-excel :data="userData">
    Download Excel
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      userData: [
        { name: "John Doe", email: "john@example.com", age: 30 },
        { name: "Jane Smith", email: "jane@example.com", age: 25 }
      ]
    }
  }
}
</script>
```

--------------------------------

### Register JsonExcel Component in Vue 3 App

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

This JavaScript code demonstrates how to globally register the JsonExcel component in a Vue 3 application's entry point. It imports the necessary `createApp` function and the JsonExcel component, then mounts the application after registration.

```javascript
import { createApp } from 'vue'
const app = createApp({})
import JsonExcel from "vue-json-excel3";
app.component("downloadExcel", JsonExcel);
```

--------------------------------

### HTML Usage for Excel Export

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

Shows the HTML template syntax for using the download-excel component. It binds data and fields, and specifies the filename and worksheet name for the exported Excel file. Customizable content within the tag is allowed.

```html
<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"
>
  Download Excel (you can customize this with html code!)
</download-excel>
```

--------------------------------

### Emit Blob for Custom Handling (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

This snippet demonstrates how to emit the file blob instead of automatically downloading it. It's useful for custom handling like uploading the file to a server. It requires the `emit-blob` attribute to be set to `true` and an `@blob` event handler.

```vue
<template>
  <download-excel
    :data="userData"
    :emit-blob="true"
    @blob="handleBlob"
    name="users.xls"
  >
    Generate File
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      userData: [
        { name: "User 1", email: "user1@example.com" },
        { name: "User 2", email: "user2@example.com" }
      ]
    }
  },
  methods: {
    handleBlob(blob) {
      // Upload to server or process blob
      const formData = new FormData()
      formData.append('file', blob, 'users.xls')

      // Example: upload to server
      fetch('/api/upload', {
        method: 'POST',
        body: formData
      }).then(response => {
        console.log('File uploaded successfully')
      })
    }
  }
}
</script>
```

--------------------------------

### HTML Usage for CSV Export

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

Illustrates how to export data as a CSV file by adding the 'type' prop with the value 'csv' to the download-excel component. This allows for easy conversion of JSON data into a comma-separated values format.

```html
<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  type="csv"
  name="filename.xls"
>
  Download CSV (you can customize this with html code!)
</download-excel>
```

--------------------------------

### Export to CSV Format in Vue

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Demonstrates exporting JSON data to a CSV file by setting the 'type' prop to 'csv'. Includes options for custom field mapping, callbacks, and CSV escaping.

```vue
<template>
  <download-excel
    :data="salesData"
    :fields="salesFields"
    type="csv"
    name="sales-report.csv"
    :escape-csv="true"
  >
    Export to CSV
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      salesFields: {
        "Product": "product",
        "Quantity": "quantity",
        "Price": "price",
        "Total": {
          callback: (row) => {
            return row.quantity * row.price
          }
        }
      },
      salesData: [
        { product: "Laptop", quantity: 5, price: 1200 },
        { product: "Mouse", quantity: 50, price: 25 },
        { product: "Keyboard", quantity: 30, price: 75 }
      ]
    }
  }
}
</script>
```

--------------------------------

### Export to XLSX Format with Formatting in Vue

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Illustrates exporting JSON data to an XLSX file with custom column formatting and widths. The 'formats' and 'widths' props are used to define these properties.

```vue
<template>
  <download-excel
    :data="financialData"
    :fields="financialFields"
    type="xlsx"
    name="financial-report.xlsx"
    :formats="columnFormats"
    :widths="columnWidths"
  >
    Download XLSX Report
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      financialFields: {
        "Date": "date",
        "Revenue": "revenue",
        "Expenses": "expenses",
        "Profit": "profit"
      },
      financialData: [
        { date: "2023-01-01", revenue: 50000, expenses: 30000, profit: 20000 },
        { date: "2023-02-01", revenue: 55000, expenses: 32000, profit: 23000 },
        { date: "2023-03-01", revenue: 60000, expenses: 35000, profit: 25000 }
      ],
      columnFormats: {
        A: "yyyy-mm-dd",
        B: "$#,##0.00",
        C: "$#,##0.00",
        D: "$#,##0.00"
      },
      columnWidths: {
        A: 15,
        B: 20,
        C: 20,
        D: 20
      }
    }
  }
}
</script>
```

--------------------------------

### Export with Field Selection and Custom Labels in Vue

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Shows how to export specific fields from JSON data to an Excel file, including custom labels for column headers and handling nested properties with callbacks. The 'fields' prop defines the mapping.

```vue
<template>
  <download-excel
    class="btn btn-primary"
    :data="json_data"
    :fields="json_fields"
    worksheet="Customer Data"
    name="customers.xls"
  >
    Download Customer Report
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      json_fields: {
        "Complete name": "name",
        "City": "city",
        "Telephone": "phone.mobile",
        "Telephone 2": {
          field: "phone.landline",
          callback: (value) => {
            return `Landline Phone - ${value}`
          }
        }
      },
      json_data: [
        {
          name: "Tony Peña",
          city: "New York",
          country: "United States",
          birthdate: "1978-03-15",
          phone: {
            mobile: "1-541-754-3010",
            landline: "(541) 754-3010"
          }
        },
        {
          name: "Thessaloniki",
          city: "Athens",
          country: "Greece",
          birthdate: "1987-11-23",
          phone: {
            mobile: "+1 855 275 5071",
            landline: "(2741) 2621-244"
          }
        }
      ]
    }
  }
}
</script>
```

--------------------------------

### Use Download Excel Component in Vue 3 Template

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

This HTML template code shows how to use the registered `downloadExcel` component in a Vue 3 application. It binds JSON data to the `data` prop and includes text and an image as the content for the download button.

```html
<download-excel :data="json_data">
  Download Data
  <img src="download_icon.png" />
</download-excel>
```

--------------------------------

### Callback Functions for Nested Data Transformation (Vue.js)

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

Illustrates how to use callback functions within the 'fields' configuration of vue-json-excel3 to transform nested data. Three scenarios are shown: accessing specific nested properties, accessing nested objects and extracting properties within the callback, and accessing the entire row when 'field' is undefined.

```javascript
    json_fields: {
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            field: 'phone.landline',
            callback: (value) => {
                return `Landline Phone - ${value}`;
            }
        },
    },

```

```javascript
    json_fields: {
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            field: 'phone',
            callback: (value) => {
                return `Landline Phone - ${value.landline}`;
            }
        },
    },

```

```javascript
    json_fields: {
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            callback: (value) => {
                return `Landline Phone - ${value.phone.landline}`;
            }
        },
    },

```

--------------------------------

### Enable Right-to-Left (RTL) Language Support (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Configure the component to support right-to-left text directionality for languages like Arabic and Hebrew. This is achieved by setting the `rtl` prop to `true`. The component will then render the Excel file with appropriate RTL layout, useful for internationalized applications.

```vue
<template>
  <download-excel
    :data="arabicData"
    :fields="arabicFields"
    type="xlsx"
    :rtl="true"
    name="arabic-report.xlsx"
  >
    تحميل التقرير
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      arabicFields: {
        "الاسم": "name",
        "المدينة": "city",
        "العمر": "age"
      },
      arabicData: [
        { name: "محمد", city: "الرياض", age: 30 },
        { name: "فاطمة", city: "جدة", age: 25 }
      ]
    }
  }
}
</script>
```

--------------------------------

### JSON Field Configuration for Export

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

Explains the structure of the 'json_fields' object used to define export columns. It covers exporting fields directly, handling nested data, and using callback functions for custom data formatting. This object controls which data is included and how it's presented.

```javascript
let json_fields = {
  // regular field (exported data 'as is')
  fieldLabel: attributeName, // nested attribute supported
  // callback function for data formatting
  anotherFieldLabel: {
    field: anotherAttributeName, // nested attribute supported
    callback: (value) => {
      return `formatted value ${value}`;
    },
  },
};

// Example of using the prop:
// :export-fields="{
//     'Human friendly name': '_name_field_from_json',
//     'user's last name': '_last_name_text'
// }"
```

--------------------------------

### Transform Data with Callbacks (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Customize data formatting during Excel export using callback functions within field definitions. This allows for complex transformations, such as reformatting phone numbers or generating combined fields based on row data. It supports accessing nested properties and applying conditional logic.

```vue
<template>
  <download-excel :data="employees" :fields="employeeFields">
    Export Employee Data
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      employeeFields: {
        "Name": "name",
        "Department": "department",
        "Phone": {
          field: "phone.mobile",
          callback: (value) => {
            return value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')
          }
        },
        "Full Contact": {
          field: "phone",
          callback: (phoneObj) => {
            return `Mobile: ${phoneObj.mobile}, Office: ${phoneObj.office}`
          }
        },
        "Status": {
          callback: (row) => {
            return row.active ? "Active" : "Inactive"
          }
        }
      },
      employees: [
        {
          name: "Alice Johnson",
          department: "Engineering",
          active: true,
          phone: {
            mobile: "5551234567",
            office: "5559876543"
          }
        },
        {
          name: "Bob Williams",
          department: "Marketing",
          active: false,
          phone: {
            mobile: "5552345678",
            office: "5558765432"
          }
        }
      ]
    }
  }
}
</script>
```

--------------------------------

### Add Headers and Footers to Excel Exports (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Include custom header and footer rows in your exported Excel files. This feature allows you to add titles, generation dates, or any other relevant information above and below the main data content. It uses the `header` and `footer` props for configuration.

```vue
<template>
  <download-excel
    :data="reportData"
    :fields="reportFields"
    :header="reportHeader"
    :footer="reportFooter"
    name="monthly-report.xls"
  >
    Download Monthly Report
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      reportHeader: [
        "Company Sales Report",
        "Generated: " + new Date().toLocaleDateString()
      ],
      reportFooter: [
        "Confidential - Internal Use Only",
        "Contact: reports@company.com"
      ],
      reportFields: {
        "Month": "month",
        "Sales": "sales",
        "Target": "target"
      },
      reportData: [
        { month: "January", sales: 45000, target: 50000 },
        { month: "February", sales: 52000, target: 50000 },
        { month: "March", sales: 48000, target: 50000 }
      ]
    }
  }
}
</script>
```

--------------------------------

### Default Values for Missing Fields (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

This snippet demonstrates how to specify default values for fields that might be missing or null in the data using the `default-value` attribute. This ensures that the exported file has consistent data, even when some records are incomplete. It works in conjunction with the `fields` attribute to map data keys.

```vue
<template>
  <download-excel
    :data="incompleteData"
    :fields="dataFields"
    default-value="N/A"
    name="incomplete-data.xls"
  >
    Download Report
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      dataFields: {
        "Name": "name",
        "Email": "email",
        "Phone": "phone",
        "Address": "address"
      },
      incompleteData: [
        { name: "John Doe", email: "john@example.com", phone: "555-1234" },
        { name: "Jane Smith", email: "jane@example.com" },
        { name: "Bob Jones", phone: "555-5678" }
      ]
    }
  }
}
</script>
```

--------------------------------

### Configure Webpack Alias for Vue in Vue 3

Source: https://github.com/pratik227/vue3-json-excel/blob/main/README.md

This JavaScript code snippet configures the webpack build process to resolve Vue to its specific version within node_modules. It disables symlinks and sets an alias for 'vue' to ensure consistent module resolution, often used to prevent issues with different Vue versions in complex projects.

```javascript
  chainWebpack(config) {
    config.resolve.symlinks(false)
    config.resolve.alias.set( 'vue', path.resolve('./node_modules/vue'))    
  }
```

--------------------------------

### Stringify Long Numbers for Precision (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

This snippet illustrates how to handle very large numbers or issues with decimal precision by stringifying them using the `stringify-long-num` attribute. This ensures that numbers which might be misinterpreted or lose precision in standard number formats are exported as strings. It's beneficial for scientific data or financial records.

```vue
<template>
  <download-excel
    :data="scientificData"
    :stringify-long-num="true"
    name="scientific-data.xls"
  >
    Download Scientific Data
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      scientificData: [
        { id: "0x1A2B3C", value: 123456789012345, decimal: 0.00000000000123 },
        { id: "0x4D5E6F", value: 987654321098765, decimal: 0.00000000000987 }
      ]
    }
  }
}
</script>
```

--------------------------------

### Export Data with Multi-line Cell Content (Vue)

Source: https://context7.com/pratik227/vue3-json-excel/llms.txt

Configure the component to correctly render multi-line text within a single Excel cell. This is achieved by including newline characters (`\n`) within the data string. The component handles the interpretation of these newlines for display in the exported file.

```vue
<template>
  <download-excel :data="dataForExcel" name="multiline.xls">
    Download with Multi-line Content
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      dataForExcel: [
        { colA: "Hello", colB: "World" },
        {
          colA: "Multi-line",
          colB: "This is a long paragraph\nwith multiple lines\nthat should show in a single cell."
        },
        { colA: "Another", colB: "Regular cell" }
      ]
    }
  }
}
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.