From efe08cced3979e40bbf011301f51f9f2f69117de Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <janober@users.noreply.github.com>
Date: Mon, 7 Aug 2023 19:06:38 +0200
Subject: [PATCH] feat(editor): Add "Download" button if JSON data is to large
 (#6850)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(editor): Add "Download" button if JSON data is to large

* :zap: Some code improvements + change button style

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
---
 packages/editor-ui/src/components/RunData.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index b12be9667..9e6706703 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -284,6 +284,12 @@
 					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
 					@click="showTooMuchData"
 				/>
+
+				<n8n-button
+					size="small"
+					:label="$locale.baseText('runData.downloadBinaryData')"
+					@click="downloadJsonData()"
+				/>
 			</div>
 
 			<div
@@ -1290,6 +1296,14 @@ export default defineComponent({
 				saveAs(blob, fileName);
 			}
 		},
+		async downloadJsonData() {
+			const inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+
+			const fileName = this.node!.name.replace(/[^\w\d]/g, '_');
+			const blob = new Blob([JSON.stringify(inputData, null, 2)], { type: 'application/json' });
+
+			saveAs(blob, `${fileName}.json`);
+		},
 		displayBinaryData(index: number, key: string) {
 			this.binaryDataDisplayVisible = true;