Fit a full page document into a page view

Question

I have three page view web parts where each show documents.  Two are word files and one is a pdf.  Is there a way to show the files 100% page size be default?  And I am not meaning full page view mode, but where just the first page fills the web part itself.  I then would love to make the web part clickable like using an a href to link to the actual document.  Is there a way to do this using Internet Explorer or Edge?  I notice when I run this in Chrome, there are document size buttons, which one is this 100% display and exactly what I need.

Thanks

---

Brad Allison

Answer 1

Hi,

How about create a custom frame using the following code?

<iframe width="850" height="506" id="myframe" src="{link}" frameborder="0" scrolling="no" style="align: left;"></iframe>

​<script language="javascript" type="text/javascript">

     function ResizeHeight(elementName) {

         //find the height of the internal page  

         var the_height = 0;

         var the_width = 0;

         var ele = document.getElementById(elementName);

         if (ele.contentWindow && ele.contentWindow.document.body) {

             // IE

             the_height = ele.contentWindow.document.body.scrollHeight;

             the_width = ele.contentWindow.document.body.scrollWidth;

             // firefox case

             if (ele.contentWindow.document.documentElement) {

                 // fetch the correct height using documentElement in firefox 

                 if (the_height < ele.contentWindow.document.documentElement.scrollHeight) {

                     the_height = ele.contentWindow.document.documentElement.scrollHeight;

                 }

             }

 

         }

         else if (ele.contentDocument && ele.contentDocument.documentElement) {

             // chrome, safari, opera

             the_height = ele.contentDocument.documentElement.scrollHeight;

             the_width = ele.contentDocument.documentElement.scrollWidth;

         }

         else {

             // unused

             the_height = ele.contentWindow.document.documentElement.scrollHeight;

             the_width = ele.contentWindow.document.documentElement.scrollWidth;

         }

         //change the height of the iframe

         if (the_height > 0 && the_width > 0) {

             var diff = 0;

             if (ele.height < the_height) {

                 ele.height = the_height + 50;

             }

             else {

                 // reduce un-necessary space created after navigating between the pages

                 diff = ele.height - the_height;

                 if (diff > 50 && the_height > 50/* value is greater than minimum height */) {

                     ele.height = the_height + 50;

                 }

             }

             if (ele.width < the_width) {

                 ele.width = the_width + 50;

             }

             else {

                 // reduce un-necessary space created after navigating between the pages

                 diff = ele.width - the_width;

                 if (diff > 100 && the_width > 50 /*value is greater than minimum width*/) {

                     ele.width = the_width + 50;

                 }

             }

         }

         // validate and set height after every half a second

         setTimeout(function () { ResizeHeight('myframe') }, 500);

     }

// on page load, resize iframe, depending on user browser, call resize routine onload

     if (window.attachEvent) {

         window.attachEvent("onload", function () {

             window.setTimeout("ResizeHeight('myframe')", 500);

         });

     }

     else if (window.addEventListener) {

         window.addEventListener("load", function () {

             window.setTimeout("ResizeHeight('myframe')", 500);

         }, false);

     }

     else {

         document.addEventListener("load", function () {

             window.setTimeout("ResizeHeight('myframe')", 500);

         }, false);

     }

</script>

Best Regards,

Dean Wang

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].


Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

Answer 2

Thanks for this.  How would be the best way to use this?  Save it into a doc library and then use a Content Editor to reference it, or some other way?  I tried to embed the code, but it strips away the javascript

EDIT:  Actually I found it.  I was using a content editor and should have been using a script editor.  This JS is working better than the Page Viewer control I was using and I need to tweak it some, but it is good.  Thanks again

---

Brad Allison

Answer 3

Hi Dean_Wang. I am a communications rep with AvePoint. To answer your question, I wonder if there's any customization involved in this scenario as customization may cause  compatibility issues using IE, while Chrome usually not. Please take a look at our AvePoint site to help you with any additional questions that you may have: https://www.avepoint.com/.