Managing the width of the PDF

Technical Support
1

Hi there,

I use pdf.js viewer.

Detailed description of issue
The PDF file is displayed without respecting the defined width:
style={{“width”:“1024px”,“height”:“600px”,“margin”:“0 auto”}}

Expected behaviour
Click here for the PHP page with PDF.JS snippet.

Does your issue happen with every document, or just one?
This happens for all PDF files.

Link to document
“Sorry, new users can only put 2 links in a post.”
emozioni.ch/assets/art/202203007.pdf

Code snippet

            <div class="row">
                <div class="col-sm-2">
                    <a href='<?php echo $NrPdf ?>' target="_blank">
                        <img src='<?php echo $Immagine ?>' style="width:100%">
                    </a>
                </div>
                <div class="col-sm-8">
                     <p>
                        <div id='articolo' style={{"width":"1024px","height":"600px","margin":"0 auto"}}></div>
                        <script>
                            WebViewer({
                                path: 'assets/z-js-pdf-viewer/lib', 
                                licenseKey: 'arVby9MhRLuYsJFEjhf8',
                                initialDoc: '<?php echo $Articolo ?>',
                                }, document.getElementById('articolo'))
                                .then(instance => {
                                    const docViewer = instance.docViewer;
                                    const annotManager = instance.annotManager;
                                    docViewer.on('documentLoaded', () => {
                                    });
                                });
                         </script>
                        <br/>
                        <br/>
                    </p>
                </div>
                <div class="col-sm-2"></div>
                <?php include 'assets/php/space.html';?>
                <?php include 'assets/php/space-emozioni-violet.html';?>
                <?php include 'assets/php/space.html';?>
            </div>

Thanks a lot!

Marco

3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hey there!

The width you have set there just controls the width of the entire WebViewer application, not the width of the document.

You can make the document fit the entire width of the viewer by changing the FitMode like so:

instance.Core.documentViewer.addEventListener('documentLoaded', () => {

    instance.UI.setFitMode(instance.UI.FitMode.FitWidth)

  })

Thanks!
Logan

1 Like