SVAR Vue Export Popup

SVAR Vue Export Popup is a portal-mounted popup that collects export options from the user and emits a structured export request for Vue apps. It supports PDF, PNG, and Excel formats, page and layout setup, selectable Excel columns, and consumer-defined custom export tabs.

The widget comes with full TypeScript support, an extensible tabs API, and flexible CSS styling. It builds the export request from the current UI state and hands it to your backend — it never downloads a file by itself.

✨ Key Features

• Built-in PDF, PNG, and Excel (XLSX) export tabs
• Paper setup, Layout modes, Presets
• Excel column selection with drag-to-reorder
• Light and dark themes
• Full TypeScript support

🛠️ How to Use

To install SVAR Vue Export Popup:

npm install @svar-ui/vue-export-popup

To use the widget, simply import the package and include the component in your Vue file:

<script setup>
import { ref } from "vue";
import { ExportPopup } from "@svar-ui/vue-export-popup";

const open = ref(false);
const anchor = ref();

function onexport(request) {
	// send the request to your export service, then close
	fetch("/api/export", {
		method: "POST",
		headers: { "Content-Type": "application/json" },
		body: JSON.stringify(request),
	});
	open.value = false;
}
</script>

<template>
	<button ref="anchor" @click="open = true">Export…</button>

	<ExportPopup
		v-if="open"
		title="Export"
		:parent="anchor"
		:onexport="onexport"
		:onclose="() => (open = false)"
	/>
</template>

⭐ Show Your Support

If SVAR Vue Export Popup helps your project, give us a star! It helps us reach more developers and keeps us motivated to add new features.

💬 Need Help?

Post an Issue or use our community forum.