fix(download): trigger downloads programmatically to work inside cross-origin iframes (#9649)

Author: mscolnick

frontend/src/plugins/layout/DownloadPlugin.tsx

@@ -80,22 +80,26 @@ const DownloadButton = ({
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = async (e: React.MouseEvent) => {
-    if (!data.lazy) {
+    if (data.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
       return;
     }
 
-    if (data.disabled) {
+    e.preventDefault();
+
+    if (!data.lazy) {
+      downloadByURL(data.data, data.filename ?? undefined);
       return;
     }
 
-    e.preventDefault();
     setIsLoading(true);
 
     try {
       const loadedData = await load({});
       downloadByURL(
         loadedData.data,
-        loadedData.filename || data.filename || "download",
+        loadedData.filename ?? data.filename ?? undefined,
       );
     } catch (error) {
       toast({
@@ -114,9 +118,7 @@ const DownloadButton = ({
   return (
     <a
       href={data.data}
-      download={data.filename || true}
-      target="_blank"
-      rel="noopener noreferrer"
+      download={data.filename ?? ""}
       onClick={handleClick}
       className={buttonVariants({
         variant: "secondary",

frontend/src/utils/download.ts

@@ -175,10 +175,12 @@ export async function downloadHTMLAsImage(opts: {
   }
 }
 
-export function downloadByURL(url: string, filename: string) {
+export function downloadByURL(url: string, filename?: string) {
   const a = document.createElement("a");
   a.href = url;
-  a.download = filename;
+  if (filename) {
+    a.download = filename;
+  }
   a.click();
   a.remove();
 }