fix(editor): Fix the issue that the content of json, html, csv, md, txt, and css files contained garbled Chinese characters when clicking the view button (#16118)

Co-authored-by: luka <[email protected]>

Author: luka-mimi

packages/frontend/editor-ui/src/components/BinaryDataDisplayEmbed.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed } from 'vue';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { IBinaryData } from 'n8n-workflow';
-import { jsonParse } from 'n8n-workflow';
+import { jsonParse, base64DecodeUTF8 } from 'n8n-workflow';
 import VueJsonPretty from 'vue-json-pretty';
 import RunDataHtml from '@/components/RunDataHtml.vue';
 import { useI18n } from '@n8n/i18n';
@@ -28,12 +28,13 @@ onMounted(async () => {
 	const { id, data: binaryData, fileName, fileType, mimeType } = props.binaryData;
 	const isJSONData = fileType === 'json';
 	const isHTMLData = fileType === 'html';
-
 	if (!id) {
 		if (isJSONData || isHTMLData) {
-			data.value = jsonParse(atob(binaryData));
+			data.value = isJSONData
+				? jsonParse(base64DecodeUTF8(binaryData))
+				: base64DecodeUTF8(binaryData);
 		} else {
-			embedSource.value = 'data:' + mimeType + ';base64,' + binaryData;
+			embedSource.value = `data:${mimeType};charset=utf-8;base64,${binaryData}`;
 		}
 	} else {
 		try {

packages/workflow/src/index.ts

@@ -27,6 +27,7 @@ export {
 	isObjectEmpty,
 	deepCopy,
 	jsonParse,
+	base64DecodeUTF8,
 	jsonStringify,
 	replaceCircularReferences,
 	sleep,

packages/workflow/src/utils.ts

@@ -155,6 +155,28 @@ type JSONStringifyOptions = {
 	replaceCircularRefs?: boolean;
 };
 
+/**
+ * Decodes a Base64 string with proper UTF-8 character handling.
+ *
+ * @param str - The Base64 string to decode
+ * @returns The decoded UTF-8 string
+ */
+export const base64DecodeUTF8 = (str: string): string => {
+	try {
+		// Use modern TextDecoder for proper UTF-8 handling
+		const bytes = new Uint8Array(
+			atob(str)
+				.split('')
+				.map((char) => char.charCodeAt(0)),
+		);
+		return new TextDecoder('utf-8').decode(bytes);
+	} catch (error) {
+		// Fallback method for older browsers
+		console.warn('TextDecoder not available, using fallback method');
+		return atob(str);
+	}
+};
+
 export const replaceCircularReferences = <T>(value: T, knownObjects = new WeakSet()): T => {
 	if (typeof value !== 'object' || value === null || value instanceof RegExp) return value;
 	if ('toJSON' in value && typeof value.toJSON === 'function') return value.toJSON() as T;