kopia lustrzana https://github.com/Tldraw/Tldraw
63 wiersze
1.9 KiB
TypeScript
63 wiersze
1.9 KiB
TypeScript
import { TDExport, TDExportType, Tldraw, TldrawApp } from '@tldraw/tldraw'
|
|
import * as React from 'react'
|
|
|
|
const ACTION = 'download' as 'download' | 'open'
|
|
|
|
export default function Export() {
|
|
const handleExport = React.useCallback(async (app: TldrawApp, info: TDExport) => {
|
|
// When a user exports, the default behavior is to download
|
|
// the exported data as a file. If the onExport callback is
|
|
// provided, it will be called instead.
|
|
|
|
switch (ACTION) {
|
|
case 'download': {
|
|
// Download the file
|
|
const blobUrl = URL.createObjectURL(info.blob)
|
|
const link = document.createElement('a')
|
|
link.href = blobUrl
|
|
link.download = info.name + '.' + info.type
|
|
link.click()
|
|
break
|
|
}
|
|
case 'open': {
|
|
// Open the file in a new tab
|
|
const blobUrl = URL.createObjectURL(info.blob)
|
|
const link = document.createElement('a')
|
|
link.href = blobUrl
|
|
link.target = '_blank'
|
|
link.click()
|
|
break
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
const [app, setApp] = React.useState<TldrawApp>()
|
|
|
|
const handleExportSVG = React.useCallback(() => {
|
|
app?.exportImage(TDExportType.SVG, { scale: 1, quality: 1 })
|
|
}, [app])
|
|
|
|
const handleExportPNG = React.useCallback(() => {
|
|
app?.exportImage(TDExportType.PNG, { scale: 2, quality: 1 })
|
|
}, [app])
|
|
|
|
const handleExportJPG = React.useCallback(() => {
|
|
app?.exportImage(TDExportType.JPG, { scale: 2, quality: 1 })
|
|
}, [app])
|
|
|
|
const handleMount = React.useCallback((app: TldrawApp) => {
|
|
setApp(app)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="tldraw">
|
|
<Tldraw id="export_example" onMount={handleMount} onExport={handleExport} />
|
|
<div style={{ position: 'fixed', top: 128, left: 32, zIndex: 100 }}>
|
|
<button onClick={handleExportPNG}>Export as PNG</button>
|
|
<button onClick={handleExportSVG}>Export as SVG</button>
|
|
<button onClick={handleExportJPG}>Export as JPG</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|