For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
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
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
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
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');
@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
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?
To learn more visit the Shopify Help Center or the Community Blog.