search

tanhauhau / express-pdf

Express serving pdf
MIT License
7 stars 5 forks source link

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

Open F9Uf opened 4 years ago

F9Uf commented 4 years ago

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 commented 3 years ago

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