-
-
Notifications
You must be signed in to change notification settings - Fork 742
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3807 from udecode/html2canvas
export
- Loading branch information
Showing
16 changed files
with
1,770 additions
and
1,082 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| --- | ||
| title: Export | ||
| --- | ||
|
|
||
| <ComponentPreview name="playground-demo" id="basic-elements" /> | ||
|
|
||
| <PackageInfo> | ||
|
|
||
| ## Features | ||
|
|
||
| - Export editor content to: | ||
| - Client-side export with no server dependencies | ||
|
|
||
| </PackageInfo> | ||
|
|
||
| ## Usage | ||
|
|
||
| Install the [PDF Toolbar Button](/docs/plate-ui/pdf-toolbar-button) component. | ||
|
|
||
| ``` | ||
| ## Examples | ||
| ### Plate UI | ||
| Refer to the preview above. | ||
| ### Plate Plus | ||
| - Server-side PDF export: | ||
| - High-quality PDF generation | ||
| - Custom fonts and styling | ||
| - Headers and footers | ||
| - Page numbers | ||
| - Font selectable | ||
| - Advanced export options: | ||
| - Paper size selection | ||
| - Margin controls | ||
| - Orientation settings | ||
| - Compression level | ||
| - Enterprise-ready features: | ||
| {/* - Batch processing */} | ||
| {/* - Watermarking */} | ||
| - Custom templates | ||
| - Password protection | ||
| Try it out with our server-side PDF export: | ||
| <ComponentPreviewPro name="export-demo" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
apps/www/public/r/styles/default/export-toolbar-button.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| { | ||
| "dependencies": [ | ||
| "html2canvas", | ||
| "pdf-lib" | ||
| ], | ||
| "doc": { | ||
| "description": "A toolbar button to export editor content as PDF.", | ||
| "docs": [ | ||
| { | ||
| "route": "/docs/export", | ||
| "title": "Export" | ||
| } | ||
| ], | ||
| "examples": [ | ||
| "basic-nodes-demo" | ||
| ], | ||
| "label": "New", | ||
| "title": "PDF Toolbar Button" | ||
| }, | ||
| "files": [ | ||
| { | ||
| "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { toDOMNode, useEditorRef } from '@udecode/plate-common/react';\nimport { ArrowDownToLineIcon } from 'lucide-react';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport {\n ToolbarSplitButton,\n ToolbarSplitButtonPrimary,\n ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nexport const ExportToolbarButton = withRef<typeof ToolbarSplitButton>(\n ({ children, ...props }, ref) => {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const getCanvas = async () => {\n const { default: html2canvas } = await import('html2canvas');\n\n const style = document.createElement('style');\n document.head.append(style);\n style.sheet?.insertRule(\n 'body > div:last-child img { display: inline-block !important; }'\n );\n\n const canvas = await html2canvas(toDOMNode(editor, editor)!);\n style.remove();\n\n return canvas;\n };\n\n const downloadFile = (href: string, filename: string) => {\n const element = document.createElement('a');\n element.setAttribute('href', href);\n element.setAttribute('download', filename);\n element.style.display = 'none';\n document.body.append(element);\n element.click();\n element.remove();\n };\n\n const exportToPdf = async () => {\n const canvas = await getCanvas();\n\n const PDFLib = await import('pdf-lib');\n const pdfDoc = await PDFLib.PDFDocument.create();\n const page = pdfDoc.addPage([canvas.width, canvas.height]);\n const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG'));\n\n page.drawImage(imageEmbed, {\n height: canvas.height,\n width: canvas.width,\n x: 0,\n y: 0,\n });\n const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true });\n\n downloadFile(pdfBase64, 'plate.pdf');\n };\n\n const exportToImage = async () => {\n const canvas = await getCanvas();\n downloadFile(canvas.toDataURL('image/png'), 'plate.png');\n };\n\n return (\n <ToolbarSplitButton\n ref={ref}\n onClick={exportToPdf}\n onKeyDown={(e) => {\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n openState.onOpenChange(true);\n }\n }}\n pressed={openState.open}\n tooltip=\"Export\"\n {...props}\n >\n <ToolbarSplitButtonPrimary>\n <ArrowDownToLineIcon className=\"size-4\" />\n </ToolbarSplitButtonPrimary>\n\n <DropdownMenu {...openState} modal={false}>\n <DropdownMenuTrigger asChild>\n <ToolbarSplitButtonSecondary />\n </DropdownMenuTrigger>\n\n <DropdownMenuContent\n onClick={(e) => e.stopPropagation()}\n align=\"start\"\n alignOffset={-32}\n >\n <DropdownMenuGroup>\n <DropdownMenuItem onSelect={exportToPdf}>\n Export as PDF\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={exportToImage}>\n Export via Image\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ToolbarSplitButton>\n );\n }\n);\n", | ||
| "path": "plate-ui/export-toolbar-button.tsx", | ||
| "target": "components/plate-ui/export-toolbar-button.tsx", | ||
| "type": "registry:ui" | ||
| } | ||
| ], | ||
| "name": "export-toolbar-button", | ||
| "registryDependencies": [ | ||
| "toolbar" | ||
| ], | ||
| "type": "registry:ui" | ||
| } |
Oops, something went wrong.