# Download Button Override Not Working in WebViewer v11

Technical Support Apryse SDK
, ,
1

Product

PDFTron WebViewer

Product Version

Version 11

Summary

Unable to override the default download button behavior in WebViewer v11 using UI.updateElement('downloadButton').

Description

When attempting to customize the download button functionality using UI.updateElement('downloadButton'), the custom download handler is not being applied. This prevents implementing custom download logic for handling presigned URLs and specific file naming requirements.

Steps to Reproduce

  1. Initialize WebViewer with the following configuration:
const instance = await WebViewer({
  path: "/webviewer/lib",
  ui: 'legacy',
  initialDoc: `/api/files/${filename}?url=${encodedUrl}&fileType=${encodedFileType}`,
  enableFilePicker: false,
  fullAPI: true,
  enableAnnotations: true,
  useDownloader: true,
  backendType: 'ems',
  streaming: true,
  loadAsPDF: false
}, containerRef.current);
  1. Attempt to override the download button behavior:
instance.UI.updateElement('downloadButton', {
  onClick: handleDownload
});
  1. Implement custom download handler:
const handleDownload = async () => {
  try {
    if (!documentData?.url || !documentData?.fileName) return;
    
    const response = await fetch(documentData.url);
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = documentData.fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  } catch (error) {
    console.error("Download error:", error);
    toast("Fehler beim Herunterladen der Datei", { position: "top-right" });
  }
};

Expected Behavior

The download button should use the custom handleDownload function when clicked, enabling custom download logic for handling presigned URLs and specific file naming.

Actual Behavior

The download button continues to use the default WebViewer download behavior instead of the custom handler.

Environment

  • WebViewer Version: 11
  • React Framework
  • Browser: Chrome, Firefox (issue appears in all major browsers)

Additional Context

This functionality worked in previous versions of WebViewer. The custom download handler is needed to properly handle presigned URLs for cloud storage and maintain specific file naming conventions.

1 Like
2

Hello @patrick.eiermann,

Thank you for posting on our forum,

In Version 11, the default UI has been changed to the new Modular UI. As such, there are now different APIs for interacting with and customizing the WebViewer UI. For a comprehensive list of the changes, please see our migration guide here: https://docs.apryse.com/web/guides/get-started/migrating-to-v11-modular-ui

To override the Download button, you can replace the item in the flyout like such:

  // create a custom button for downloading
  const testFlyoutButton = {
    dataElement: 'testFlyoutButton',
    label: 'Download',
    onClick: handleDownload,
    icon: 'icon-download',
  };
  
  const mainMenuFlyout = instance.UI.Flyouts.getFlyout('MainMenuFlyout');
  const mainMenuFlyoutItems = mainMenuFlyout.items;
  const downloadButtonIndex = mainMenuFlyoutItems.findIndex(item => item.dataElement === 'downloadButton');
  mainMenuFlyoutItems[downloadButtonIndex] = testFlyoutButton;
  mainMenuFlyout.setItems(mainMenuFlyoutItems);

For more information on our Modular Flyout Menus, see this guide here: https://docs.apryse.com/web/guides/modular-ui/flyouts#overview

Let us know if this works for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like