Print
A component that displays a preview of a printable document.
This component must be a direct child of the Screen component and cannot be nested inside any other component.
Anchor to printpreviewPrintPreview
Renders a preview of a printable document. This component must a direct child of the Screen component.
- stringrequired
The source to print.
The src must be either:
- A relative path that will be appended to your app's application_url
- A full URL to your app's backend that will be used to return the document
Supported document types:
- HTML documents (recommended for best printing experience)
- Text files
- Image files (PNG, JPEG, etc.)
- PDF files
PrintPreviewProps
- src
The source to print. The src must be either: - A relative path that will be appended to your app's [application_url](/docs/apps/build/cli-for-apps/app-configuration#application_url) - A full URL to your app's backend that will be used to return the document Supported document types: - HTML documents (recommended for best printing experience) - Text files - Image files (PNG, JPEG, etc.) - PDF files
string
export interface PrintPreviewProps {
/**
* The source to print.
*
* The src must be either:
* - A relative path that will be appended to your app's [application_url](/docs/apps/build/cli-for-apps/app-configuration#application_url)
* - A full URL to your app's backend that will be used to return the document
*
* Supported document types:
* - HTML documents (recommended for best printing experience)
* - Text files
* - Image files (PNG, JPEG, etc.)
* - PDF files
*/
src: string;
}Basic PrintPreview
examples
Basic PrintPreview
description
Basic usage with relative and full URLs:
React
import React from 'react'; import { Screen, reactExtension, Button, PrintPreview, useApi, } from '@shopify/ui-extensions-react/point-of-sale'; const Modal = () => { const api = useApi<'pos.home.modal.render'>(); return ( <Screen name="Home" title="Home"> <Button title="Print" onPress={() => api.print.print('/documents/test-print') } /> <PrintPreview src="/documents/test-print" /> </Screen> ); }; export default reactExtension( 'pos.home.modal.render', () => <Modal />, );TS
import { Button, PrintPreview, Screen, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.home.modal.render', (root, api) => { const homeScreen = root.createComponent( Screen, { name: 'Home', title: 'Home', }, ); const printButton = root.createComponent( Button, { title: 'Print', onPress: () => api.print.print( '/documents/test-print', ), }, ); const printPreview = root.createComponent( PrintPreview, { src: '/documents/test-print', }, ); homeScreen.append(printPreview); homeScreen.append(printButton); root.append(homeScreen); }, );
Preview
