react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Better Rotation Display and Text Item Filter Support

Open hdwatts opened this issue 5 years ago • 0 comments

Hi @wojtekmaj, I am a huge fan of react-pdf and use it heavily in my project.

I wish I could share the example file with you but unfortunately it is under an NDA.

The PDF in question has a page where, as best I can describe, the text is rotated but the page is not. This leads to the text items to be rendered with a font-size of 0px, as the item's fontWidthPx is set but the fontHeightPx is not.

I dug through your source code and the pdf.js source code, and found a way to detect rotation for the text items. I've put code here in the angle key - and applied it where necessary. The text that previously was not displayed now displays aligned on top of the text canvas, and I tested many normal documents and they all function as intended.

image

Now, this same pdf had ANOTHER issue, in that on this same page there are - I am not kidding - 10,000+ separate areas of whitespace attempting to be rendered. This causes the webpage to slow to a crawl and in most cases crash chrome. I tried adding a CustomTextRenderer that returns null, however the outer <span> element still renders so the performance issues remain.

I've added a textItemFilter prop to Page.jsx that takes a function and if the function returns false it does not render anything for that text item.

If you have a better idea for fixing these two issues I am all ears! Thanks for all you do in maintaining this great library.

hdwatts avatar May 15 '19 22:05 hdwatts