Skip to main content
R
rgrinage_0904
Participating Frequently
May 12, 2020
Question

How Do I Correctly Set defaultViewMode to FIT_WIDTH in View SDK?

  • May 12, 2020
  • 1 reply
  • 1876 views

I have read all of the basic instructions for the View SDK, and I am trying to set my pdf viewer to open documents with the "FIT_WIDTH" defaultViewMode.  I have tried various placements for the setting, and I suspect my syntax is just not correct.  Here is my code:

<div id="adobe-dc-view" style="width:60%;height:600px;padding-top:50px"></div>
	<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
	<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){
		var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://www.shcsfarmington.org/Newsletter_050420.pdf"}},
			metaData:{fileName: "Newsletter_050420.pdf"}
		}, {embedMode: "SIZED_CONTAINER", defaultViewMode: "FIT_WIDTH"});
	});
	</script>

This is my best guess as to the placement and syntax, but it is not working - as you can see at this web page here: https://www.shcsfarmington.org/pdf-view.html 

This is the last hurdle, I believe, in order to get the Adobe viewer embedded the way I would like, so I appreciate any help to accomplish this.  Thanks.

    This topic has been closed for replies.

    1 reply

    S
    Adobe Employee
    Shubhanshu Dixit
    Adobe Employee
    May 13, 2020

    It looks like you are trying to use Sized Container Embed Mode. defaultViewMode is not supported in Sized Container.

    Maybe you would like to explore other options. https://documentcloud.adobe.com/view-sdk-demo/index.html

    R
    rgrinage_0904Author
    Participating Frequently
    May 13, 2020

    Thank you for that very correct answer!  I am making progress, but I have one final glitch in my desired solution for this web page.  The perfect configuration of the viewer that I want to use can be seen here:

    https://www.shcsfarmington.org/pdf-view.html 

    My ideal solution is to open that viewer inside a w3.css "modal" container, so that the viewer appears over the web page where the documents are opened with a click button.  The problem I am having can be seen at this web page:

    https://www.shcsfarmington.org/2020/news-test.html 

    If you click on the image below "May 4, 2020" the modal element opens just exactly the way I want it to, but the pdf file does not load properly.  Keep in mind that I am using the exact same script syntax for both web pages, the only difference is that on the news-test page it is opening up inside the modal, which to me should make no difference?  Here is the code for reference:

     

     

    <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
	<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){
		var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://www.shcsfarmington.org/Newsletter_050420.pdf"}},
			metaData:{fileName: "Newsletter_050420.pdf"}
		}, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
	});
	</script>

     

     

    I appreciate any help to find the answer and solution to this pdf loading size problem.  Thanks.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices