Ejemplos
Formulario con barra de progreso
<script lang="ts">
import { MarkpdfClient, createConvertStore } from "@markpdf/svelte";
const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });
const convertStore = createConvertStore(client);
function onFile(e: Event) {
const file = (e.target as { files?: FileList | null }).files?.[0];
if (file) convertStore.convert(file, { mode: "fast" });
}
</script>
<input type="file" accept="application/pdf" on:change={onFile} disabled={$convertStore.status === "uploading"} />
{#if $convertStore.status === "uploading" || $convertStore.status === "converting"}
<progress value={$convertStore.status === "uploading" ? $convertStore.progress : 100} max={100} />
{/if}
{#if $convertStore.error}
<p role="alert">{$convertStore.error.message}</p>
{/if}
{#if $convertStore.markdown}
<pre>{$convertStore.markdown}</pre>
<button on:click={() => convertStore.reset()}>Convertir otro</button>
{/if}
Arrastrar y soltar
<script lang="ts">
import { MarkpdfClient, createConvertStore } from "@markpdf/svelte";
const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });
const convertStore = createConvertStore(client);
let dragging = false;
function onDrop(e: DragEvent) {
e.preventDefault();
dragging = false;
const file = e.dataTransfer?.files[0];
if (file) convertStore.convert(file, { mode: "fast" });
}
</script>
<div
role="button"
tabindex="0"
on:dragover|preventDefault={() => (dragging = true)}
on:dragleave={() => (dragging = false)}
on:drop={onDrop}
class:dragging
>
{#if $convertStore.status === "idle"}Suelta un PDF aquí{/if}
{#if $convertStore.markdown}<pre>{$convertStore.markdown}</pre>{/if}
</div>
<style>
div { border: 2px dashed #ccc; padding: 32px; }
div.dragging { border-color: #14b8a6; }
</style>
Rango de páginas de un PDF grande
convertStore.convert(file, { mode: "fast", pages: "1-20" });
Metadatos en lugar de solo Markdown
await convertStore.convert(file, { responseFormat: "json" });
// $convertStore.json.engine, $convertStore.json.tokenSavedEstimate, ...
Canalización RAG con pdfIndex
import { MarkpdfClient } from "@markpdf/svelte";
const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });
const PDF = "https://bucket.example.com/informe-anual.pdf?sig=...";
const spine = await client.pdfIndex(PDF);
const target = spine.sections.find((s) => s.text.includes("Resultados"));
if (target) {
const markdown = await client.convertFromUrl(PDF, {
pages: `${target.page}-${spine.pageCount}`,
mode: "fast",
});
}
SvelteKit: carga a través de tu propio punto final (clave protegida)
src/routes/api/convert/+server.ts
import { MARKPDF_API_KEY } from "$env/static/private";
import { MarkpdfClient } from "@markpdf/svelte";
import type { RequestHandler } from "./$types";
const client = new MarkpdfClient({ apiKey: MARKPDF_API_KEY });
export const POST: RequestHandler = async ({ request }) => {
const form = await request.formData();
const file = form.get("file") as File;
const markdown = await client.convertFile(file, { filename: file.name, mode: "fast" });
return new Response(markdown, { headers: { "content-type": "text/markdown" } });
};
Ejemplos que usan
createConvertStore directamente en una llamada de componente API desde el navegador; la clave API permanece visible en el paquete. Utilice el patrón de punto final propietario anterior en la producción pública.