Forums Home / Document Solutions / Document Solutions for PDF
Posted by: eric on 30 June 2019, 3:05 pm EST
eric
Posted 30 June 2019, 3:05 pm EST - Updated 29 September 2022, 11:16 pm EST
Hi, We are interested in your JavaScript PDF viewer.
But it does not display correctly on some PDF files.
Attached is a sample file for your reference.
Is there any chance to fix it?
REQ1409073.zip
manish.gupta
Posted 30 June 2019, 8:15 pm EST
Hello Eric,
We are sorry for the inconvenience, we are able to replicate the issue and it has been forwarded to the concerned team for further investigation with internal id DOC-1317.
We will let you know as we get an update on this.
Regards,
Manish Gupta
dmitry.yaitskov
Posted 4 July 2019, 8:35 am EST
Hi Eric,
There are two specific things that combined in this PDF to cause the problem:
The content that is not shown is a rich text annotation (which is a kind of HTML). In the current version of our viewer, we just use the default browser style (including padding) unless it is specified explicitly in the rich text. In this particular PDF, the padding is not specified - but Acrobat uses zero padding in such cases while we used default browser’s (which is not zero). This caused the text to scroll out of the window. This issue is fixed in the new version of our viewer (which is included in the sample attached to this message, see below).
Additionally, the font specified in the annotation is not embedded in the PDF, so a default font would be used unless a suitable font is found. As far as I could determine, a monospace font is suitable in this case, so in the attached sample I included an open font that produced suitable result. (BTW, even Acrobat Reader and Acrobat Pro show this text differently on my system.)
Attached is the sample that (a) includes a new version of our viewer (0.7.21, will soon be uploaded to our server/npmjs), and (b) specifies a suitable font for the annotation so that it aligns correctly.
Hope this helps.
Dmitry.
eric
Posted 4 July 2019, 3:38 pm EST - Updated 29 September 2022, 11:16 pm EST
Thanks for your quick reply. I am very impressed for your support.
Here are two more files that can’t display display correctly.
B216-103213455.zip[img]https://gccontent.blob.core.windows.net/forum-uploads/file-b727632a-3ce9-40e0-ae56-477f8f028b27.png[/img][img]https://gccontent.blob.core.windows.net/forum-uploads/file-f80521cb-3025-4074-902a-02d00c35f2df.png[/img]
dmitry.yaitskov
Posted 5 July 2019, 12:24 am EST
Hi again Eric,
Thanks for your post/new issues (really 
). The problem with these files is different, it is caused by the fact that some uncommon CMaps are used in those PDFs. We are working on providing a resolution for this, for your reference the issue id is DOC-905. I’ll keep you posted on the progress.
(Just FYI, this is similar to what is demonstrated by our server-side component’s sample http://demos.componentone.com/gcdocs/gcpdf/Samples/List/CMapResources/codeCS - but of course, in this case we need a client side solution.)
Thanks,
Dmitry.
dmitry.yaitskov
Posted 8 July 2019, 3:09 am EST
Update: we added support for external CMaps, the new build 0.7.22 should be available soon, and is included in the attached sample. (BTW, the DOC-905 id in my previous message was a typo, the correct one is DOC-1328).
Let me know whether this helps.
Dmitry.
eric
Posted 8 July 2019, 3:51 pm EST
Hi dmitry.yaitskov,
This problem doesn’t seem to have been solved or worse in JSPdfViewer-Content_22.zip. None of the three PDFS are displayed correctly.
REQ1409073.pdf has been fixed at 4 July but It’s also broken now.
dmitry.yaitskov
Posted 10 July 2019, 1:26 am EST
Hi again,
As I mentioned, your PDFs include texts that require external CMaps. In build .22 we added support for those, and added the external cmaps in the resource/bcmaps directory. The files in that directory have .bcmap extension, which is not by default understood by web servers (e.g. IIS). So to ensure that those files are available to the control when it is served by the web server, a small piece of code needs to be added to the app’s startup. It is documented in the version.txt file that would be included in a proper release, but unfortunately I did not include it in the sample, sorry. If you look in the CoreApp\Startup.cs file in my zip, you will see this:
var provider = new FileExtensionContentTypeProvider(); provider.Mappings[".bcmap"] = "application/octet-stream"; app.UseStaticFiles(new StaticFileOptions() { ContentTypeProvider = provider });
This, and the wwwroot\resource directory, are required for the external CMaps to work in build .22.
But, upon reviewing this case we decided that we will change the cmap files’ extension to .bin so that they will be served by default. So basically, most of what I wrote above is moot, later today I will post a new build that should work by default (you will still need to copy the wwwroot\resource directory though). Stay tuned
And BTW, many thanks for your feedback - hopefully it will help us to improve the viewer and make it more user-friendly.
Regards,
Dmitry.
dmitry.yaitskov
Posted 10 July 2019, 4:54 am EST
Hi,
Attached is the sample with the new version. Please try it, in my tests all your files show correctly. Let me know.
Regards,
Dmitry.
JSPdfViewer-Content_23.zip
eric
Posted 10 July 2019, 2:13 pm EST - Updated 29 September 2022, 11:16 pm EST
Hi dmitry.yaitskov,
Many thanks for your work. You are one of the very few component vendors willing to respond and fix problems with Chinese character display in PDF. Thank you (really).
It is almost correctly In JSPdfViewer-Content_23.zip. Only one thing is different with the Adobe Reader. The font type of Chinese characters are incorrect.
dmitry.yaitskov
Posted 11 July 2019, 12:48 am EST - Updated 29 September 2022, 11:16 pm EST
Hi Eric,
As was mentioned earlier, the font in question is not embedded in the PDF. Hence it should be made available to the viewer, otherwise the viewer will use a substitute font (as is the case here). (Acrobat has full access to the fonts installed in the OS, hence it shows the correct font if it is installed, but the browser does not.)
To fix this, you need to find the correct font (shown in the attached image), convert it to .woff (e.g. here https://convertio.co/ttf-woff/), and make it available on your page by adding something like this:
<style>
@font-face { font-family: 'DFKaiShu'; src: url('MicrosoftKaitiFontSimplifiedChinese.woff') format('woff'); }
div.gc-viewer { font-family: 'DFKaiShu'; }
</style>
Hope this helps. Let me know.
Dmitry.
eric
Posted 11 July 2019, 8:30 pm EST
Hi Dmitry,
It’s worked after add font-face and font file.
Or```
@font-face { font-family: ‘DFKaiShu’; src:local(“DFKai-SB”); }
div.gc-viewer { font-family: ‘DFKaiShu’; }
It's also worked without add woff font to site. Because the font "DFKai-SB" is default install into Chinese version of windows .
I have one question for the style " div.gc-viewer { font-family: 'DFKaiShu'; } "
If there is an another kind of font(named "Microsoft JhengHei") not embedded in the PDF. It will show DFKaiShu to replace "Microsoft JhengHei" in PDF ?
There is one more PDF have problems.
[zip filename="5010088-footer-font.zip"]https://gccontent.blob.core.windows.net/forum-uploads/file-057eeada-ceb9-4242-9acd-63da04a268fa.zip[/zip]
1. The THUMBNAILS is Weird on display between page 10 and 11 .
[img]https://gccontent.blob.core.windows.net/forum-uploads/file-29d9bb1c-0a1a-4191-be3f-1f83d9f26a71.png[/img]
2. How to let print preview same as page in display ?
Print preview
[img]https://gccontent.blob.core.windows.net/forum-uploads/file-bcff6889-37bf-410c-bf7f-914ff8083150.png[/img]
Same page display in viewer
[img]https://gccontent.blob.core.windows.net/forum-uploads/file-de206c5f-58fd-4a8b-b3c5-69428f93e698.png[/img]dmitry.yaitskov
Posted 15 July 2019, 4:17 am EST
Hi Eric,
Thanks again for providing your feedback. We have fixed the thumbnail and print preview issues you found, the fixed build is attached - just unzip it, and copy the following files/dirs from it:
"
“build\gcpdfviewer.js”
“build\gcpdfviewer.worker.js”
“build\resources”
“build\themes”
"
When printing, you may get empty pages in some cases due to browser print margins. JS code cannot control those, so you may have to adjust (set to none) the margins yourself.
Re woff fonts - this format has the best browser support, hence the recommendation to use it.
Re specifying other fonts - you may use the following approach:
<link rel="preload" href="MicrosoftKaitiFontSimplifiedChinese.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="JhengHei.woff" as="font" type="font/woff" crossorigin />
<style>
@font-face { font-family: 'DFKaiShu'; src: url('MicrosoftKaitiFontSimplifiedChinese.woff') format('woff'); }
@font-face { font-family: 'AnyOtherFontFace; src: url('MicrosoftKaitiFontSimplifiedChinese.woff') format('woff'); }
@font-face { font-family: 'JhengHei'; src: url('JhengHei.woff') format('woff'); }
</style>
Hope this helps. Let me know.
eric
Posted 19 July 2019, 1:28 am EST
Hi Dmitry,
It works. Thank you.
I want discuss one thing. Is Viewer can do that load pdf file from remote url and lazy load for each page?
dmitry.yaitskov
Posted 19 July 2019, 6:04 am EST
Hi Eric,
Glad it works!
Re lazy load - you need a linearized PDF for this, our viewer does support such files, we have a sample where GcPdf creates a linearized PDF and the viewer shows it:
https://demos.componentone.com/gcdocs/gcpdf/Samples/List/LinearizedPdf/imageCS
Generally speaking, a PDF is not just a sequence of independent pages, they may have links to other resources elsewhere in the PDF file, so lazy loading of pages is only possible for PDFs specifically prepared for that - that’s what linearized PDF are for.
Hope this helps,
Dmitry.
P.S. I will mark my previous message as answer for this thread if you don’t mind. But do let me know if you encounter any other issues.
eric
Posted 19 July 2019, 2:02 pm EST
Hi Dmitry,
Load PDF from remote url like the following? The Viewer will support lazy loading if I convert sample.pdf to linearized PDF.
dmitry.yaitskov
Posted 25 July 2019, 4:52 am EST
Hi Eric,
Sorry for the belated reply. Yes, the code you posted should do ‘lazy loading’ if the PDF is a linearized one.
Hope this helps.
Dmitry.
