I'm having a hard time figuring out how to set a custom name for the exported file instead of just "Pivot". The HTML/Vue part contains the Pivot along with a select dropdown for filtering by date, which is working fine. The issue lies in customizing the export functionality.
<template>
<v-card>
<v-progress-linear
v-if="loading"
class="position-absolute"
style="z-index: 1"
color="red"
height="10"
indeterminate></v-progress-linear>
<v-card-title style="text-align:center"> Reports </v-card-title>
<v-card-text v-if="!loading">
<v-row>
<v-col cols="3" offset="1">
<v-select
v-model="selectedDate"
:items="reportdates"
label="Period:"
item-title="rd_date_label"
item-value="rd_date"
density="compact"
hide-details>
</v-select>
</v-col>
</v-row>
<br />
<v-row>
<Pivot id="pivotid"
ref="pivotref"
height="650px"
:report="report"
:toolbar="toolbar"
:beforetoolbarcreated="beforetoolbarcreated">
</Pivot>
</v-row>
</v-card-text>
</v-card>
</template>
Here is the Javascript part with relevant methods and data structure:
<script>
// import necessary modules and CSS files
export default {
// component details and properties
components: {
Pivot
},
computed: {
// computed properties
},
mounted() {
},
created() {
this.loadingData();
},
data() {
// data structure
},
watch: {
// watch statements
},
methods: {
// methods for data loading and manipulation
},
}