Admin print function - Preview/Print PDF

Retired Boards Appdev Extensions
,

Topic summary

A user is attempting to preview and print PDF files directly within Shopify’s admin print extension dialog, similar to how HTML endpoints work.

Initial Confirmation:

  • The admin UI extensions team confirmed that PDF endpoints should be supported.

Implementation Issue:
Despite using what appears to be correct code structure (base64-encoded PDF with proper headers: Content-Type: application/pdf and Content-disposition: inline), the PDF preview is not displaying correctly. The user shared code showing they’re returning a Buffer from base64 data with appropriate headers.

Working Solution Provided:
A team member shared a functional Remix example that:

  • Creates a simple PDF using raw PDF syntax
  • Converts to base64 then back to Buffer
  • Returns via CORS-enabled Response with identical headers
  • Successfully displays in the preview dialog

Browser Compatibility Issue:
A separate user reported that Chrome blocks the base64 PDF preview, while Firefox and Edge display it correctly. This suggests a browser-specific limitation rather than a code implementation problem.

Status: The discussion remains open with a potential Chrome-specific blocking issue identified.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
6

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
Screenshot 2024-09-13 at 12.11.51 PM.png1006×603 18.2 KB

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