vue-excel-xlsx icon indicating copy to clipboard operation
vue-excel-xlsx copied to clipboard

Only create the Excel data on button click?

Open jdl2206 opened this issue 4 years ago • 1 comments

Thanks so much for this awesome component! Our data is in a 2D String array so I need to format it as json before the Excel file is created. I'd prefer to only have to format the data when the Download Excel button is clicked. Is there a way to do that?

jdl2206 avatar Jul 14 '20 21:07 jdl2206

Hi,

this is workaround, but you can use ref and call exportExcel().

    <vue-excel-xlsx
            ref="xlsxData"
            style="display: none"
            :data="jsonData['data']"
            :columns="jsonData['columns']"
            file-name="Exported data"
            :file-type="'xlsx'"
            :sheet-name="'Export'"
          >
    </vue-excel-xlsx>
    <button
            type="button"
            class="btn btn-success bi bi-download"
            @click="clickOk"
          >
            Download
     </button>

and in script part:

async clickOk() {
   this.jsonData = await getData();
   setTimeout(() => {
        this.$refs["xlsxData"].exportExcel();
      }, 200);
}

antiv avatar Nov 12 '22 18:11 antiv