Mestre Base64 para desenvolvimento de front-end

// Encode text to Base64
function encodeToBase64(text) {
  // Encode UTF-8 to avoid issues with special characters
  const utf8Text = unescape(encodeURIComponent(text));
  return btoa(utf8Text);
}

// Decode Base64 to text
function decodeFromBase64(base64String) {
  const utf8Text = atob(base64String);
  return decodeURIComponent(escape(utf8Text));
}

// Example usage
const originalText = "Hello, Base64!";
const encodedText = encodeToBase64(originalText);
const decodedText = decodeFromBase64(encodedText);

console.log("Original:", originalText); // "Hello, Base64!"
console.log("Encoded:", encodedText);   // "SGVsbG8sIEJhc2U2NCE="
console.log("Decoded:", decodedText);   // "Hello, Base64!"

// Get elements from DOM
const fileInput = document.getElementById('image-upload');
const previewImage = document.getElementById('image-preview');
const base64Output = document.getElementById('image-base64');

// Handle file selection
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith('image/')) {
    alert('Please select an image file!');
    return;
  }

  // Create FileReader to read the image
  const reader = new FileReader();
  
  // On load, get Base64 data
  reader.onload = (event) => {
    const base64Data = event.target.result;
    
    // Preview the image
    previewImage.src = base64Data;
    previewImage.style.display = 'block';
    
    // Show Base64 data (truncated for readability)
    const truncatedData = base64Data.length > 100 
      ? base64Data.substring(0, 100) + '...' 
      : base64Data;
    base64Output.textContent = truncatedData;
  };
  
  // Read the file as Base64
  reader.readAsDataURL(file);
});

// Convert Base64 to Blob
function base64ToBlob(base64Data, contentType = 'application/octet-stream') {
  // Extract Base64 data (remove "data:..." prefix if present)
  const base64WithoutPrefix = base64Data.startsWith('data:')
    ? base64Data.split(',')[1]
    : base64Data;
  
  // Decode Base64 to binary string
  const binaryString = atob(base64WithoutPrefix);
  const byteLength = binaryString.length;
  
  // Convert binary string to Uint8Array
  const uint8Array = new Uint8Array(byteLength);
  for (let i = 0; i < byteLength; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }
  
  // Create and return Blob
  return new Blob([uint8Array], { type: contentType });
}

// Trigger file download from Blob
function downloadBlobAsFile(blob, fileName) {
  // Create temporary URL for Blob
  const url = URL.createObjectURL(blob);
  
  // Create anchor element to trigger download
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  
  // Simulate click to start download
  document.body.appendChild(a);
  a.click();
  
  // Clean up
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Example: Download Base64 PDF
const base64Pdf = "JVBERi0xLjQKJeLjz9MNCjYgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlciAvRmxhdGVEZWNvZGU+PgpzdHJlYW0KeAovRjEgMTAgVGYKMDAwLjEwNS4wMDAuMTAwCjAwMC4yOTkuMDAwLjAwMAo...";
const pdfBlob = base64ToBlob(base64Pdf, 'application/pdf');
downloadBlobAsFile(pdfBlob, 'report.pdf');

<template>
  <div class="base64-converter">
    <h3 class="text-lg font-semibold mb-4">Vue Base64 Converter</h3>
    
    <!-- Input for text -->
    <div class="mb-4">
      <label class="block mb-2 text-sm font-medium">Enter Text:</label>
      <textarea 
        v-model="inputText" 
        class="w-full p-2 border rounded"
        rows="3"
        placeholder="Type text to encode..."
      ></textarea>
      <button 
        @click="encode"
        class="mt-2 px-4 py-1 bg-primary text-white rounded"
      >Encode to Base64</button>
    </div>
    
    <!-- Output for Base64 -->
    <div class="mb-4">
      <label class="block mb-2 text-sm font-medium">Base64 Result:</label>
      <textarea 
        v-model="base64Output" 
        class="w-full p-2 border rounded"
        rows="3"
        readonly
      ></textarea>
      <button 
        @click="decode"
        class="mt-2 px-4 py-1 bg-secondary text-white rounded"
      >Decode to Text</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      base64Output: ''
    };
  },
  methods: {
    encode() {
      if (!this.inputText) return;
      // Encode UTF-8 text to Base64
      const utf8Text = unescape(encodeURIComponent(this.inputText));
      this.base64Output = btoa(utf8Text);
    },
    decode() {
      if (!this.base64Output) return;
      // Decode Base64 to UTF-8 text
      const utf8Text = atob(this.base64Output);
      this.inputText = decodeURIComponent(escape(utf8Text));
    }
  }
};
</script>