PrintPreview

Anchor to PropertiesProperties

Anchor to ExamplesExamples

Anchor to Preview printable contentPreview printable content

Display a preview of printable content before triggering the print operation. This example shows how to use PrintPreview with HTML documents, PDFs, images, or text files, supporting various document formats with proper rendering for receipts, invoices, and formatted reports.

Preview printable content

Preview printable content

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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 />,

);

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

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);

},

);

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);
  },
);

Anchor to Best practicesBest practices

• Design print-optimized content: Structure your printable content with print-specific CSS media queries, appropriate page breaks, and formatting that works well on physical paper. Consider printer capabilities and paper sizes commonly used in POS environments.
• Implement proper error handling: Handle cases where the source URL is unavailable, the document format is unsupported, or network issues prevent content loading. Provide clear feedback to users when preview or printing fails.
• Consider platform-specific limitations: Be aware that PDF files on Android devices require external applications for printing. Design your workflow to handle this gracefully, potentially offering alternative formats or clear instructions for Android users.
• Optimize source URL management: Use relative paths when possible for internal app resources to simplify URL management and improve performance. Reserve full URLs for external resources or when you need complete control over the endpoint.
• Provide clear print workflows: Combine PrintPreview with appropriate UI controls like print buttons, allowing users to review content before committing to print. Consider implementing print confirmation dialogs for important or expensive print operations.

Anchor to LimitationsLimitations

• PrintPreview must be a direct child of the Screen component and can't be nested inside any other component—this structural requirement ensures proper preview rendering and print functionality.
• The component requires network access to fetch content from the specified source URL—offline functionality isn't supported for remote content.
• Content is displayed as-is from the source—real-time content modification or editing within the preview isn't supported.
• PDF printing on Android devices requires external applications—the component can't handle PDF printing natively on all platforms, which may affect user experience consistency across different POS devices.