Loading viewer dynamically with javascript

I am trying to preload the viewer for performance reasons and then load a file in the viewer with javascript. We have to stream the files to the viewer. We are using 2.19 (.NET), not planning on going to 3.0 just yet. The viewer is loaded in an iFrame.


On the iFrame we have the following code to preload the viewer when the iFrame is loaded.
@Html.CreateViewerScriptLoadBlock().LoadJquery().LoadJqueryUi()
@(Html.ViewerClientCode()
.TargetElementSelector("#DV")
.ShowFolderBrowser(false)
.EnableRightClickMenu(true)
.UseHtmlBasedEngine(false)
.ShowViewerStyleControl(false)
.UseInnerThumbnails(true)
.PreloadPagesCount(1)
.ZoomToFitWidth()
)

In the iFrame page with the viewer I have a javascript function that I am trying to use to load the file in the viewer dynamically. The function calls the url @Url.Action(“GetDocument”, “DV”) which returns a filestream.

function LoadDocument(DocumentId) {
$.ajax({
type: “GET”,
url: ‘@Url.Action(“GetDocument”, “DV”)’,
data: “Id=” + DocumentId,
success: function (encFilePath) {
console.log(encFilePath);
var localizedStrings = null,
thumbsImageBase64Encoded = null;

$(’#DV’).groupdocsViewer({
filePath: encFilePath,
quality: 100,
showThumbnails: true,
openThumbnails: true,
initialZoom: 100,
zoomToFitWidth: true,
zoomToFitHeight: false,
width: 1000,
height: 650,
backgroundColor: ‘’,
showFolderBrowser: false,
showPrint: true,
showDownload: true,
showZoom: true,
showPaging: true,
showViewerStyleControl: true,
showSearch: true,
preloadPagesCount: 0,
viewerStyle: 1,
supportTextSelection: true,
usePdfPrinting: false,
localizedStrings: localizedStrings,
thumbsImageBase64Encoded: thumbsImageBase64Encoded,
toolbarButtonsBoxShadowStyle: ‘’,
toolbarButtonsBoxShadowHoverStyle: ‘’,
thumbnailsContainerBackgroundColor: ‘’,
thumbnailsContainerBorderRightColor: ‘’,
toolbarBorderBottomColor: ‘’,
toolbarInputFieldBorderColor: ‘’,
toolbarButtonBorderColor: ‘’,
toolbarButtonBorderHoverColor: ‘’,
thumbnailsContainerWidth: 0,
jqueryFileDownloadCookieName: ‘jqueryFileDownloadJSForGD’,
showDownloadErrorsInPopup: false,
showImageWidth: false,
showHeader: true,
minimumImageWidth: 0,
enableStandardErrorHandling: true,
useHtmlBasedEngine: false,
useImageBasedPrinting: true,
fileDisplayName: ‘’,
downloadPdfFile: false,
searchForSeparateWords: false,
preventTouchEventsBubbling: false,
useInnerThumbnails: true,
watermarkText: ‘’,
watermarkColor: ‘’,
supportPageReordering: false,
onlyShrinkLargePages: true,
searchHighlightColor: ‘’,
currentSearchHighlightColor: ‘’,
treatPhrasesInDoubleQuotesAsExactPhrases: false,
usePngImagesForHtmlBasedEngine: false,
showOnePageInRow: false,
loadAllPagesOnSearch: false,
useEmScaling: false
});
}
});
}

This javascript call seems to use a filepath and not a stream. Is there anyway to accomplish this with a stream? Thanks.

Robert

Hi,


Thank you for the request. Unfortunately in case of using JavaScript and the Viewer 2.x only the filePath option is available.

Sorry for the inconvenience.

Ok, I have started a demo project to see if I can do what I need using the 3.0.0 dll for .net. I am using the showcase code for the legacy viewer.


I am using the following code to load the viewer the first time and it works great. I had to modify it to work with streams but so far it is working. But only on the initial load. If I change the call the LoadDocument function a second time nothing happens…

Am I missing something? Is there another extension I can call? Thanks.

function LoadDocument(DocumentId){
$(’#viewerHtmlDiv’).groupdocsViewer({
filePath: DocumentId,
zoomToFitWidth: true,
showFolderBrowser: true,
showHeader: true,
showPaging: true,
showThumbnails: false,
useHtmlThumbnails: false,
//watermarkPosition: ‘Diagonal’,
//watermarkText: ‘Watermark for pdf’,
useHtmlBasedEngine: false,

showDownload: true,
downloadPdfFile: true,

showPrint: true,
usePdfPrinting: true
});
}

Hi,


Thank you for coming back. To reload/change the document you should delete the Viewer DIV with the JavaScript and then create and add it again with another document.

Best regards.

Hi,

Sorry if I am bringing back an old thread. I would like to do something similar to what the OP is doing.

However, based on the guide posted by Derek from this site (How to Use GroupDocs' Document Viewer for .NET MVC4), I do not see the method calls stated in the guide while using the latest version of the GroupDocs.Viewer library from NuGet. Do I need to actually download the DLLs file from this site?(https://downloads.groupdocs.com/viewer/net/new-releases/-groupdocs.viewer-for-.net-21.10-(dlls-only)/)

@keithworks

Unfortunately, the post references the UI and API versions that are not supported at the moment. You can find the supported versions in our Demos at GitHub.