F7-button open route. prevent-router not working

Questions
1

I’m using sheetjs and the download file button method opens a not-existing route instead of downloading the file.

<template>
	<f7-page name="home">
		<xlsx-workbook>
			<xlsx-sheet
				:collection="sheet.data"
				:key="sheet.name"
				:sheet-name="sheet.name"
			/>
			<xlsx-download>
				<f7-button fill prevent-router>Download</f7-button>
			</xlsx-download>
		</xlsx-workbook>
	</f7-page>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import supabase from '../supabase.js'
import {
	XlsxWorkbook,
	XlsxSheet,
	XlsxDownload,
} from "vue3-xlsx/dist/vue3-xlsx.cjs.prod.js";

const sheet = ref({ name: "SheetOne", data: [{ c: 2 }] });
</script>

Same result if I use SheetJs directly without vue wrapper. Also tried f7-button type=“button” and type=“submit”.

Tested with Vue3+Vite default setup and it works fine (with vue router).

Need help, please.

Thanks

2

What is the output HTML generated by those xlsx components, it is not the button, i guess it wraps something with <a> tag

3

Thanks for the reply. This is the HTML generated by components.

<div><!----><div><button class="button button-fill prevent-router" type="submit"><!----><!---->Download XLSX</button></div></div>

Also, I tested this with SheetJS directly without vue wrapper. This is the code I tried but same results. It opens a non-existent route instead of downloading the file.

<template>
	<f7-page name="home">
		<f7-button fill prevent-router class="my-3" @click="saveXLSX">Save XLSX</f7-button>
	</f7-page>
</template>
<script setup>
import * as XLSX from "xlsx";

const saveXLSX = async () => {
	const url = "https://sheetjs.com/executive.json";
	const raw_data = await (await fetch(url)).json();

	/* filter for the Presidents */
	const prez = raw_data.filter((row) =>
		row.terms.some((term) => term.type === "prez")
	);

	/* flatten objects */
	const rows = prez.map((row) => ({
		name: row.name.first + " " + row.name.last,
		birthday: row.bio.birthday,
	}));

	/* generate worksheet and workbook */
	const worksheet = XLSX.utils.json_to_sheet(rows);
	const workbook = XLSX.utils.book_new();
	XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

	/* fix headers */
	XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

	/* calculate column width */
	const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
	worksheet["!cols"] = [{ wch: max_width }];

	/* create an XLSX file and try to save to Presidents.xlsx */
	XLSX.writeFile(workbook, "Presidents.xlsx");
}
</script>

This demo code from SheetJs.com worked fine with Vue3 + Vite default setup.

4

The issue is resolved with XLSX.write() method and then save file as blob with capacitor-blob-writer. There is something with XLSX.writeFile() method which is triggering f7 router.