Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style in pdf on production is not like on development #2

Open
F9Uf opened this issue Apr 26, 2020 · 1 comment
Open

style in pdf on production is not like on development #2

F9Uf opened this issue Apr 26, 2020 · 1 comment

Comments

@F9Uf
Copy link

F9Uf commented Apr 26, 2020 •
edited
Loading

Hello, I created an API to generate PDFs by using express-pdf library. I used pug engine.
When I develop in my local, using nodemon, CSS style is work,
But I deploy my app to the cloud (digital ocean), using pm2 to start the app, and its layout is not the same as in local.
such as font size, margin, font style etc.

image

This is an example code in pug

What problems can be caused?
@octsiri
Copy link

octsiri commented Oct 5, 2021

Same here, I create a pdf from react comp and render it on server, service it as ssr. But it seems some css can not be implemented on production as on my local development. Please help, need idea.

//  Here is my content to render
const rawContent = (
    <StyleSheetManager sheet={sheet.instance}>
      {
        //$FlowFixMe
        <ApolloProvider client={client}>
          <UikitProvider value={uikit}>
            <ThemeProvider theme={getTheme('default-light')}>
              <OrderPreviewReceipt
                orderNumber={decodeURIComponent(orderNumber)}
                purchaseDate={decodeURIComponent(purchaseDate)}
              />
            </ThemeProvider>
          </UikitProvider>
        </ApolloProvider>
      }
    </StyleSheetManager>
  );

// Here is my script to render the the rawContent  on ssr as a pdf file
// import {getDataFromTree} from '@apollo/react-ssr';

getDataFromTree(rawContent)
    .then(() => {
      const content = ReactDOM.renderToStaticMarkup(rawContent);
      const filename = `Resi Pembelian Order ${orderNumber} | ${purchaseDate}.pdf`;
      const htmlContent = ReactDOM.renderToStaticMarkup(
        <html lang="id-ID">
          <head>{sheet.getStyleElement()}</head>
          <body
            dangerouslySetInnerHTML={{__html: content}}
            style={{fontFamily: 'Arial'}}
          />
        </html>
      );

      //$FlowFixMe
      res.pdfFromHTML({
        filename,
        htmlContent,
        options: {
          height: '1024px',
          width: '820px',
          type: 'pdf',
          quality: '100',
        },
      });
    })

Trying to hardcode the font family on body tag but still somehow it does not works at all.
Thanks

@octsiri octsiri mentioned this issue Oct 5, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@F9Uf @octsiri