locked
Fit a full page document into a page view RRS feed

  • 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

    Thursday, March 1, 2018 12:44 AM

Answers

  • 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 tnsf@microsoft.com.


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

    Thursday, March 1, 2018 10:21 AM

All replies

  • 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 tnsf@microsoft.com.


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

    Thursday, March 1, 2018 10:21 AM
  • 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


    Thursday, March 1, 2018 1:00 PM
  • 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/.
    Thursday, March 8, 2018 3:43 PM