如何在JavaScript中基于Base64内容下载XML文件（不采用创建a标签并编程点击的实现方式）

Got it, since you don't want to mess with creating <a> tags and programmatically clicking them, here are two solid native JavaScript approaches to download that Base64 XML content directly in the browser:

Method 1: Blob + Browser Native Save APIs (Supports IE10+ & Modern Browsers) #

This approach avoids any DOM element creation and leverages browser-built-in APIs. We'll first convert the Base64 string to a Blob, then use appropriate APIs based on the browser:

// Your original Base64 content from the backend
const base64Content = "data:application/xml;base64," + xmlContent;

// Helper function to convert Base64 data URI to Blob
function base64ToBlob(base64Data, contentType) {
  contentType = contentType || '';
  const sliceSize = 1024;
  const byteCharacters = atob(base64Data.split(',')[1]); // Extract pure Base64 string
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
}

// Create the XML Blob
const xmlBlob = base64ToBlob(base64Content, 'application/xml');

// Trigger download (must be called inside a user interaction event like a button click)
async function downloadXmlFile() {
  try {
    if (window.navigator && window.navigator.msSaveBlob) {
      // For IE10+
      window.navigator.msSaveBlob(xmlBlob, 'downloaded-file.xml');
    } else {
      // For modern browsers (Chrome, Firefox, Edge, Safari 13.1+)
      const fileHandle = await window.showSaveFilePicker({
        suggestedName: 'downloaded-file.xml',
        types: [
          {
            description: 'XML Files',
            accept: { 'application/xml': ['.xml'] }
          }
        ]
      });
      
      const writableStream = await fileHandle.createWritable();
      await writableStream.write(xmlBlob);
      await writableStream.close();
    }
  } catch (error) {
    console.error('Download failed:', error);
  }
}

// Example: Attach to a button click (required for browser security)
document.getElementById('download-btn').addEventListener('click', downloadXmlFile);

Notes: #

• The showSaveFilePicker API is part of the File System Access API, which lets users choose the save location and filename directly. It must be triggered by a user interaction (like a button click) to avoid being blocked by browser security policies.
• The msSaveBlob method is a legacy API for older IE versions, which directly triggers the save dialog.

Method 2: Blob + window.open (Use With Caution) #

This method doesn't require creating <a> tags, but it might get blocked by pop-up blockers in some browsers. Only use this if you're sure it's triggered by a clear user action:

// Reuse the base64ToBlob function from Method 1
const xmlBlob = base64ToBlob(base64Content, 'application/xml');
const blobUrl = URL.createObjectURL(xmlBlob);

// Open the Blob URL to trigger download
window.open(blobUrl);

// Clean up the Blob URL to free memory after a short delay
setTimeout(() => {
  URL.revokeObjectURL(blobUrl);
}, 1000);

Notes: #

• Some browsers might display the XML content in the new window instead of downloading it, making this less reliable than Method 1. Always test this in your target browsers.

内容的提问来源于stack exchange，提问作者Ikim SS