Html component for react-pdf with CSS support
npm install react-pdf-html component for react-pdf
- Support for CSS via 1. Parses the HTML string into a JSON tree of nodes using node-html-parser `` OR ` ` const html = return ( const element = ( const html = ReactDOMServer.renderToStaticMarkup(element); return ( tags return ( return ( Remote styles must be resolve asynchronously, outside of the React rendering, const html = const stylesheets = await fetchStylesheets(html, { ... return ( Reset browser default styles (see CSS reset) The default styesheet roughly matches browser defaults, using a rough emulation of ems: StyleSheet.create({ By default, the basis for the font size ems is based on the If this is not defined, it falls back to a default of Please note that tags and style attributes (limited to Style properties supported by react-pdf)
- Browser CSS defaults with option for style reset
- Basic (attempted using flex layouts)
and support
- Ability to provide custom renderers for any tag
- Support for inline tags and remote stylesheets (using fetch)How it Works
2. Parses any tags in the document and style attributes using css-tree
3. Renders all nodes using the appropriate react-pdf components, applying cascading styles for each node as an array passed to the style prop:
- block/container nodes using
- inline/text nodes using , with appropriate nesting and collapsing of whitepace
- nodes using
- nodes using Installation
bash`
npm i react-pdf-htmlbash`
yarn add react-pdf-htmlUsage
tsx
import Html from 'react-pdf-html';
Heading 1
Heading 2
Heading 3
Heading 4
Paragraph with bold, italic, underline,
strikethrough,
and all of the above
Paragraph with image and
link
Text outside of any tags
Column 1
Column 2
Column 3
Foo
Bar
Foobar
Foo
Bar
Some longer thing
Even more content than before!
Even more content than before!
function myCode() {
const foo = 'bar';
}
;`
{html}
);`Rendering React Components
tsx`
import ReactDOMServer from 'react-dom/server';
Heading 1
Heading 2
...
);
{html}
);`Props
ts`
type HtmlProps = {
children: string; // the HTML
collapse?: boolean; // Default: true. Collapse whitespace. If false, render newlines as breaks
renderers?: HtmlRenderers; // Mapping of { tagName: HtmlRenderer }
style?: Style | Style[]; // Html root View style
stylesheet?: HtmlStyles | HtmlStyles[]; // Mapping of { selector: Style }
resetStyles?: false; // If true, style/CSS reset
};`Overriding Element Styles
$3
tsx`
const stylesheet = {
// clear margins for all
p: {
margin: 0,
},
// add pink background color to elements with class="special"
['.special']: {
backgroundColor: 'pink',
},
};
{html}
);`$3
tsx
const html = Foobar;`
{html}
);`$3
because react-pdf doesn't support asynchronous renderingtsx
import { fetchStylesheets } from 'react-pdf-html';
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous" />
;`
...fetchOptions
});
{html}
);`Resetting Styles
tsx`
return (
{html}
);`Font Sizes
tsx`
const em = (em: number, relativeSize: number = fontSize) => em * relativeSize;
h1: {
fontSize: em(2),
marginVertical: em(0.67, em(2)),
fontWeight: 'bold',
},
...
});fontSize from props.style:`tsx`
return (
{html}
);18react-pdfFonts for bold, italic, etc.
has some constraints with how fonts are applied (see https://react-pdf.org/fonts). You must provide a different font file for each combination of bold, italic, etc. For example:`ts``
Font.register({
family: 'OpenSans',
fonts: [
{ src: fonts + '/Open_Sans/OpenSans-Regular.ttf' },
{ src: fonts + '/Open_Sans/OpenSans-Bold.ttf', fontWeight: 'bold' },
{ src: fonts + '/Open_Sans/OpenSans-Italic.ttf', fontStyle: 'italic' },
{
src: fonts + '/Open_Sans/OpenSans-BoldItalic.ttf',
fontWeight: 'bold',
fontStyle: 'italic',
},
],
});