Log in to start a topic

Custom pdf viewer styling

Posted by: apoddubnjak4 on 9 October 2019, 7:42 pm EST

  • apoddubnjak4

    Posted 9 October 2019, 7:42 pm EST

    Hello, I have to customize pdf viewer, how I can do this in angular 8? including icons, fonts and etc

  • apoddubnjak4

    Posted 9 October 2019, 8:35 pm EST

    also I want to draw in pdf

    how I can do this?

  • apoddubnjak4

    Posted 9 October 2019, 9:59 pm EST

    How I can change controls in menu?

  • ashwin.saxena

    Posted 10 October 2019, 5:31 pm EST

    Hi Andrew,

    Regarding icons:

    You may customize the icons using CSS rules, mainly fill and stroke:

    .wj-viewer .wj-btn-group .wj-btn svg.wj-svg-btn {
	fill: orange;
	stroke: blue;
}

    Regarding fonts:

    To change the font of the PDF viewer, you may simply set the font-family CSS rule to the required font:

    .wj-viewer {
	font-family: sans-serif;
}

    Regarding drawing in PDF:

    Could you please confirm whether you wish to draw on the PDF document? If this is your requirement, then we are sorry but this is not possible. But if you have any other requirement, could you please explain it a little more?

    Regarding changing controls:

    Could you please explain more about what controls you wish to change?

    Regards,

    Ashwin

  • apoddubnjak4

    Posted 16 October 2019, 12:06 am EST - Updated 3 October 2022, 5:47 am EST

    Thanks, I have done this

    possibility to draw I will implement later

    now I have second issue

    PDF file does has been downloaded ( I see it in “network” tab in inspector). but then I have in console error:

    zone.js:202 Uncaught SyntaxError: Unexpected token % in JSON at position 0

    at JSON.parse ()

    at _parseExecutionInfo (es5-esm.js:14)

    at Object.onFulfilled (es5-esm.js:14)

    at e.onFulfilled (es5-esm.js:14)

    at es5-esm.js:14

    at ZoneDelegate.invokeTask (zone.js:431)

    at Zone.runTask (zone.js:198)

    at ZoneTask.invokeTask (zone.js:513)

    at ZoneTask.invoke (zone.js:502)

    at timer (zone.js:3041)

    When I open in separate tab link of my PDF, hosted in server - pdf is downloaded and everything fine

    thanks

  • ashwin.saxena

    Posted 16 October 2019, 3:12 pm EST

    Hi,

    Could you please let us know on which server you have hosted the PDF document? The wijmo PDFViewer only supports hosting of PDF document using the C1WebApi PDF Services. For more information on C1WebApi PDF service, please refer to the link below:

    https://help.grapecity.com/componentone/NetHelp/c1webapi/webframe.html#PDFDocumentServices.html

    But, if you are already using C1WebApi for hosting the document, could you please provide us with a sample replicating the issue along with the PDF service url?

    ~regards

  • apoddubnjak4

    Posted 17 October 2019, 5:28 am EST

    Now no issues with server

    How I can customize search in pdf?

  • ashwin.saxena

    Posted 17 October 2019, 5:27 pm EST

    Hi,

    Could you please explain more about what you wish to customize in the search so that I could investigate further?

    ~regards

  • apoddubnjak4

    Posted 17 October 2019, 10:49 pm EST

    I want to change styling, search button, search pannel, text, icons(change your svg icon), and etc

    I want to do it in HTML, not in js

    Do you have in your viewer api function, which make search?

    I pass to this function string, I want to be found

    and it return array of objects, where needed string was found?

  • ashwin.saxena

    Posted 20 October 2019, 10:59 pm EST

    Hi,

    Regarding search customization:

    Since most of the icons in the PDFViewer control are made using SVG elements, I would not recommend you to change the icons of the viewer. But, you can change the style of the icons by using the CSS rules that I provided earlier.

    Regarding the search function:

    We are sorry but since search is performed internally by the viewer, therefore no API is available publicly.

    ~regards

  • apoddubnjak4

    Posted 23 October 2019, 7:51 pm EST

    got it, thanks

    can you tell me how I can get book page width and height?

    I have to insert custom elements in pages, element position depends on height of page and width.

    but when I try to get height and width of page or svg via JS, I alway get height:0 and width:0

    the second solution(I am not sure): to get page width and height after first page content was downloaded, but I dont see in your documentation event which emitted when book or page is loaded

    how you can help me to solve a problem of dinamically adding elements into pages depending of book page width and height?

  • manish.gupta

    Posted 24 October 2019, 7:28 pm EST

    Hi,

    The Pdf rendered in the PDFViewer using SVG elements with a wrapper DIV which has class .wj-view-page.

    You may get the page using following code-snippet:```

    document.querySelector(“.wj-view-page”)

    But this only returns for the current page if the page view is single page view. 

PS: This DOM gets changed whenever the scrolling or any other action performed on the Viewer. 

It would be great if you may share your requirement with us so that we may provide solutions accordingly or discuss with the concerned team if required.

Regards,
Manish Gupta

  • apoddubnjak4

    Posted 24 October 2019, 8:04 pm EST

    try to do it in ngOnInit() or ngAfterViewInit()

    and try to get height or width

    you will always get zeros

    my requirements: I have created component and it have to be positioned in page corners

    I tried to insert, but I have to know correct width and height of page

    also different books have different page width and height

    also bad UX - when I change page - it start downloading - if downloading is long, I start scrolling and as user, can forgot that I change page - and when page is downloaded - it auto scroll to that page

    and worse is that if I change few pages at small time - they are downloading long - and when downloaded I, as user, cant understant why my scroll “jump” from page to page

    where we can chat in “direct” so it will be faster?

  • ashwin.saxena

    Posted 27 October 2019, 6:48 pm EST

    Hi,

    The document should be loaded properly in order to get the dimensions of the SVG element. I have created an enhancement request to add an event for the document load with the internal tracking id 403328.

    Regarding scrolling:

    Could you please try setting the viewMode of the PDFViewer to Continuous and let me know if this solves your issue.

    If the issue is not resolved then let us know and we will create a case on our support portal and we will contact you.

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.