I am using chrome only for viewing. I can understand that the performance will be low, but many a times it even fail to open the file in viewer, i have to close and re-initiate it. if you are luckey it works. Currently i am attaching 3 GB file where this is a issue as well. We have requirement to load upto 15GB file.
Please find the requested details below.
- WebViewer code for the constructor and how you’re loading the file
function initializeWebviewer(options) {
let { siteId, licenseKey, isPasswordProtected } = options;
const useWebviewerClient = isPasswordProtected == “True”;
$(function () {
dssSigninCallback(siteId, function (user) {
WebViewer.Iframe(
{
path: “/Scripts/webviewer/lib”,
webviewerServerURL:
useWebviewerClient
? null : ${window.location.origin}/webviewer,
licenseKey,
fullAPI: true,
disabledElements: [
“downloadButton”,
“printButton”,
“thumbnailControl”,
“documentControl”,
],
disableLogs: true,
css: “/Scripts/webviewer.css”,
ui: “legacy”
},
document.getElementById(“webviewerContainer”)
).then((instance) => renderWebviewer(instance, user, options));
});
});
}
function render() {
window.top.webviewer = instance;
configureWebviewer();
loadFileInWebviewer();
configureWebviewerMode();
}
function configureWebviewer() {
const userId = user.profile["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier"].toLowerCase();
const { fileName } = options;
const isPdfFile = fileName.toLowerCase().indexOf(".pdf") + 4 == fileName.length;
UI.setLanguage(navigator.language.substring(0, 2));
annotationManager.setCurrentUser(userId);
annotationManager.enableReadOnlyMode();
if (isPdfFile) {
documentViewer.setFitMode(documentViewer.FitMode.FitWidth);
UI.openElements(["leftPanel", "notesPanel"]);
} else {
documentViewer.setFitMode(documentViewer.FitMode.FitPage);
UI.openElements(["leftPanel"]);
}
};
function loadFileInWebviewer() {
const { fileName, fileUrl, cacheKey, xfdfUrl } = options;
const isTiffFile =
fileName.toLowerCase().indexOf(".tif") + 4 == fileName.length ||
fileName.toLowerCase().indexOf(".tiff") + 5 == fileName.length;
if (isTiffFile) {
loadTiffFileInWebviewer(fileUrl);
} else {
showStatusDialog(getLocalizedText("59AE4BE7-9563-4960-9837-75AF40BD0E9C"), false);
instance.UI.loadDocument(fileUrl, {
filename: fileName,
cacheKey: (btoa(window.location.origin) + "_" + btoa(cacheKey)).padEnd(40, "_"),
customHeaders: { Authorization: `Bearer ${user.access_token}` },
});
if (xfdfUrl) {
documentViewer.addEventListener("annotationsLoaded", async () => {
showStatusDialog(getLocalizedText("D5ECDCC3-C49B-4305-81B0-2B0ECD45779E"), false);
const xfdfString = await getXfdfString(xfdfUrl, user.access_token);
const existingAnnotations = annotationManager.getAnnotationsList();
annotationManager.deleteAnnotations(existingAnnotations, { force: true });
annotationManager.importAnnotations(xfdfString);
annotationManager.setPermissionCheckCallback((author) => {
return author.toLowerCase() == annotationManager.getCurrentUser().toLowerCase();
});
await SetUserDisplayName();
UI.closeElements(["SaveCommentsStatusModal"]);
registerEvents();
});
} else {
UI.closeElements(["SaveCommentsStatusModal"]);
}
}
}
function configureWebviewerMode() {
const { fileRno, mode, canComment } = options;
if (mode == "comment") {
if (canComment === "False") {
alert(getLocalizedText("08736852-1a44-433b-a508-ac28e5302ffc"));
} else {
addSaveButtonToWebviewer(fileRno);
annotationManager.disableReadOnlyMode();
UI.disableElements([
"toolbarGroup-FillAndSign",
"toolbarGroup-Forms",
"toolbarGroup-Edit",
]);
setStandardStamps();
annotationManager.addEventListener("annotationChanged", (annotations, action, { imported }) => {
if (!imported && annotations.length == 1) {
const annot = annotations[0];
if (annot instanceof instance.Core.Annotations.StampAnnotation && action === 'add') {
const selectedStampDetails = stampDetailsList.find(item => item.pngBase64 === annot.image.src);
if (selectedStampDetails != null) {
annot.setCustomData('StampName', selectedStampDetails.name);
const annotationWidth = annot.Width;
const annotationHeight = annot.Height;
annot.Width = 100;
annot.Height = (annot.Width * annotationHeight) / annotationWidth;
instance.Core.annotationManager.redrawAnnotation(annot);
}
}
}
});
annotationManager.addEventListener("annotationSelected", async (annotations, action) => {
if (annotations.length == 1) {
const annot = annotations[0];
const originalStampDetails = stampDetailsList.find(item => item.name === annot.getCustomData('StampName'));
if (annot instanceof instance.Core.Annotations.StampAnnotation && action === 'selected' && originalStampDetails != null) {
const svgWithSystemAttributes = annot.getCustomData('SvgWithSystemAttributes');
let svgToReplaceAttributes = svgWithSystemAttributes != "" ? svgWithSystemAttributes : originalStampDetails.svg;
//replace system attributes if any
const systemAttributePlaceholders = getMatchingAttributes(svgToReplaceAttributes, false);
if (systemAttributePlaceholders.length > 0 && svgWithSystemAttributes == "") {
svgToReplaceAttributes = await replaceSystemAttributes(annot, fileRno, originalStampDetails.stampRno);
}
//replace custom attributes if any
const customAttributePlaceholders = getMatchingAttributes(svgToReplaceAttributes);
if (customAttributePlaceholders.length > 0) {
replaceCustomAttributes(annot, svgToReplaceAttributes, customAttributePlaceholders);
}
}
}
});
}
}
}
- A download link to a sample file and HAR file for the issue
(Microsoft OneDrive)
