2026-03-24 20:24:08 +00:00
|
|
|
---
|
|
|
|
|
title: useExport
|
|
|
|
|
description: Manage export settings like scale and format for the current selection.
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# useExport
|
|
|
|
|
|
|
|
|
|
`useExport()` is the export-panel composable for selected nodes.
|
|
|
|
|
|
|
|
|
|
It manages:
|
|
|
|
|
|
|
|
|
|
- export settings rows
|
|
|
|
|
- selected node ids
|
|
|
|
|
- export name labeling
|
2026-09-25 11:42:42 +00:00
|
|
|
- supported scales and formats (`formats` ids and labeled `formatOptions`)
|
2026-03-24 20:24:08 +00:00
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
import { useExport } from '@open-pencil/vue'
|
|
|
|
|
|
|
|
|
|
const exportState = useExport()
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Basic example
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
const {
|
|
|
|
|
settings,
|
|
|
|
|
nodeName,
|
|
|
|
|
scales,
|
|
|
|
|
formats,
|
2026-09-25 11:42:42 +00:00
|
|
|
formatOptions,
|
2026-03-24 20:24:08 +00:00
|
|
|
addSetting,
|
|
|
|
|
updateScale,
|
|
|
|
|
updateFormat,
|
|
|
|
|
} = useExport()
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Practical examples
|
|
|
|
|
|
|
|
|
|
### Add another export preset
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
exportState.addSetting()
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Change the first export to 2x WEBP
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
exportState.updateScale(0, 2)
|
2026-09-25 11:42:42 +00:00
|
|
|
exportState.updateFormat(0, 'webp')
|
2026-03-24 20:24:08 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Related APIs
|
|
|
|
|
|
|
|
|
|
- [useSelectionState](./use-selection-state)
|
|
|
|
|
- [useEditor](./use-editor)
|