Admin print function - Preview/Print PDF

[skraloupak]

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

[Liam]

Hi Jan,

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

[skraloupak]

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"'

Thank you for letting me know

Best

Jan

[skraloupak]

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]

@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]

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"'
    },
  }))
}

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

[samir_al_anabi]

Chrome is blocking the PDF when returning the PDF file as base64

[samir_al_anabi]

I have added screen. Its working on firegox and even on edge.