wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.

Home Page:https://projects.wojtekmaj.pl/react-pdf

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Non-alphanumeric characters with `fixed` prop

cox-michael opened this issue · comments

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Symbols like the copyright symbol do not render on wrapped pages when using the fixed prop, but the rest of the text renders just fine.

Steps to reproduce

  1. Make a page with enough content to wrap it at least once.
  2. Add in my Footer component at the bottom
export function Footer() {
  return (
    <View
      fixed
      style={{
        position: "absolute",
        bottom: 0,
        left: 0,
        width: 595,
        padding: "18px 25px",
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
      }}
    >
      <View>
        <Text style={{ fontSize: 7 }}>
          © Company Name. All Rights Reserved.
        </Text>

        {/* page counter goes here */}
      </View>
    </View>
  );
}

Expected behavior

© Company Name. All Rights Reserved. should render on the bottom of every page.

Actual behavior

© Company Name. All Rights Reserved. is rendered on the bottom of the first page and subsequent pages only render Company Name. All Rights Reserved. (without the copyright symbol).

Additional information

I was able to get around it by utilizing the render prop:

<Text
  style={{ fontSize: 7 }}
  render={() => "© Company Name. All Rights Reserved."}
/>

Environment

  • @react-pdf/renderer version: 3.1.12
  • React version: 18.2.0

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.