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

New Here ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

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.

Views

300

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 13, 2020 May 13, 2020

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines