Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Admin print function - Preview/Print PDF

Admin print function - Preview/Print PDF

skraloupak
Shopify Partner
27 3 4

Hello all,

 

We are trying to invoke printing from the new admin print extension. We have an endpoint that is returning a PDF content and we would like to print and preview it directly in the admin dialog (same as HTML endpoint). Is it possible, or we have to preview/print only HTML endpoints?

 

Thank you

Jan

Replies 5 (5)

Liam
Community Manager
3108 344 905

Hi Jan,

 

I've checked with the admin UI extensions team and PDF endpoints should be supported. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

skraloupak
Shopify Partner
27 3 4

Thank you for your reply. That's great.

I've tried multiple ways, but the document isn't previewed correctly.

 

See anything that might be wrong? 

Response data: base64

Headers: 

'Content-Type', 'application/pdf'
'Content-disposition', 'inline; filename="xxxx.pdf"'

screenshot 136.pngscreenshot 137.png

 

Thank you for letting me know 🙂

Best

Jan

skraloupak
Shopify Partner
27 3 4

Code detail:

ctx.res.setHeader('Content-Type', 'application/pdf');
ctx.res.setHeader('Content-disposition', 'inline; filename="' + hash + '.pdf"');
ctx.body = Buffer.from(printLabels.result, 'base64');

 

skraloupak
Shopify Partner
27 3 4

@Liam Could you please provide more details or examples on how the endpoint should be structured from the admin UI extensions team? Currently, I need help getting it to work for me.


Best

Jan

ElanaK
Shopify Staff
16 4 4

Hi @skraloupak 

 

We came up with a simple, somewhat contrived, example so we could make our Remix app do basically the same thing that you have in your example, with the same headers and the same Base64 encoding.

 

We have this code working:

 

import { authenticate } from "../shopify.server";
import { type LoaderFunctionArgs } from "@remix-run/node";

export async function loader({request}: LoaderFunctionArgs) {
  const {cors} = await authenticate.admin(request);

  const pdfContent = `
    %PDF-1.1
    1 0 obj
    <<
    /Type /Catalog
    /Pages 2 0 R
    >>
    endobj
    2 0 obj
    <<
    /Type /Pages
    /Kids [3 0 R]
    /Count 1
    >>
    endobj
    3 0 obj
    <<
    /Type /Page
    /Parent 2 0 R
    /MediaBox [0 0 612 792]
    /Contents 4 0 R
    >>
    endobj
    4 0 obj
    <<
    /Length 44
    >>
    stream
    BT
    /F1 24 Tf
    100 700 Td
    (Hello world!) Tj
    ET
    endstream
    endobj
    5 0 obj
    <<
    /Type /Font
    /Subtype /Type1
    /BaseFont /Helvetica
    >>
    endobj
    xref
    0 6
    0000000000 65535 f
    0000000010 00000 n
    0000000053 00000 n
    0000000101 00000 n
    0000000178 00000 n
    0000000246 00000 n
    trailer
    <<
    /Size 6
    /Root 1 0 R
    >>
    startxref
    314
    %%EOF
  `;

    const pdfBase64 = Buffer.from(pdfContent).toString('base64');
    const pdfBuffer = Buffer.from(pdfBase64, 'base64');

  return cors(new Response(pdfBuffer, {
    status: 200,
    headers: {
      'Content-Type': 'application/pdf',
      'Content-disposition': 'inline; filename="generated.pdf"'
    },
  }))
}

 

 

Screenshot 2024-09-13 at 12.11.51 PM.png

 

Do you see any other errors or could something be going wrong in pdf route?

To learn more visit the Shopify Help Center or the Community Blog.