जावास्क्रिप्ट में एक Base64 स्ट्रिंग से एक BLOB बनाना

Question

मेरे पास एक स्ट्रिंग में Base64- एन्कोडेड बाइनरी डेटा है:

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

मैं blob:इस डेटा से युक्त एक URL बनाना चाहता हूं और इसे उपयोगकर्ता को दिखाऊंगा:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

मुझे यह पता नहीं चल पाया है कि BLOB कैसे बनाया जाता है।

कुछ मामलों में मैं data:इसके बजाय एक URL का उपयोग करके इससे बचने में सक्षम हूं :

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

हालाँकि, ज्यादातर मामलों में data:URL निषेधात्मक रूप से बड़े होते हैं।

---

मैं जावास्क्रिप्ट में एक ब्लॉब ऑब्जेक्ट के लिए बेस 64 स्ट्रिंग को कैसे डीकोड कर सकता हूं?

Answer 1

atobसमारोह बाइनरी डेटा के प्रत्येक बाइट के लिए एक चरित्र के साथ एक नया स्ट्रिंग में एक Base64- एन्कोड स्ट्रिंग डिकोड होगा।

const byteCharacters = atob(b64Data);

प्रत्येक चरित्र का कोड बिंदु (चारकोड) बाइट का मूल्य होगा। हम .charCodeAtस्ट्रिंग में प्रत्येक वर्ण के लिए विधि का उपयोग करके इसे बाइट मानों की एक सरणी बना सकते हैं ।

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

आप इस प्रकार के बाइट मानों को Uint8Arrayकंस्ट्रक्टर में पास करके वास्तविक टाइप बाइट सरणी में बदल सकते हैं ।

const byteArray = new Uint8Array(byteNumbers);

बदले में इसे एक सरणी में लपेटकर और इसे Blobकंस्ट्रक्टर को पास करके एक BLOB में परिवर्तित किया जा सकता है ।

const blob = new Blob([byteArray], {type: contentType});

उपरोक्त कोड काम करता है। हालाँकि, byteCharactersछोटे स्लाइस में प्रसंस्करण के बजाय प्रदर्शन को थोड़ा बेहतर किया जा सकता है , बजाय एक बार में। मेरे किसी न किसी परीक्षण में 512 बाइट्स एक अच्छे स्लाइस आकार के लगते हैं। यह हमें निम्नलिखित फ़ंक्शन देता है।

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  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);
  }

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

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

पूर्ण उदाहरण:

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  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);
  }

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

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

Comments

हाय जेरेमी। हमारे वेब एप्लिकेशन में हमारा यह कोड है और जब तक डाउनलोड की जा रही फाइलें आकार में बड़ी नहीं थीं, तब तक यह कोई समस्या नहीं थी। इसलिए यह उत्पादन सर्वर में हैंग और क्रैश हो गया, जब उपयोगकर्ता 100mb से बड़ी फ़ाइलों को डाउनलोड करने के लिए Chrome या IE का उपयोग कर रहे थे। हमने पाया कि IE निम्नलिखित पंक्ति में मेमोरी अपवाद "var byteNumbers = new Array (slice.length)" बढ़ा रहा था। हालांकि क्रोम में, यह लूप के लिए समान मुद्दा था। हमें इस समस्या का उचित समाधान नहीं मिला, तो हम सीधे window.open का उपयोग करके फ़ाइलों को डाउनलोड करने के लिए चले गए। क्या आप यहाँ कुछ सहायता प्रदान कर सकते हैं?

— अक्षय राउत

क्या प्रतिक्रिया में मूल रूप से वीडियो फ़ाइल को आधार 64 में बदलने की कोई विधि है? मैं एक छवि फ़ाइल के साथ ऐसा करने में कामयाब रहा, लेकिन वीडियो के लिए एक समाधान नहीं मिला। लिंक मददगार होंगे या समाधान भी।

— दीक्षा

तो वहाँ कोई मुद्दे नहीं हैं (0) द्वारा लौटाए गए स्ट्रिंग में 0 स्टोर कर रहे हैं?

— 1945 बजे wcochran

यह मेरे लिए क्रोम और फ़ायरफ़ॉक्स पर कुछ

— ब्लब्स के

मेरे लिए काम किया। इसकी ** ** JSON पार्स त्रुटि: अपरिचित toke '<' ** मैं एक छवि बना रहा है एक ब्राउज़र में डाल द्वारा base64 स्ट्रिंग की जाँच की फेंकता है। कुछ मदद की जरूरत है।

— अमन दीप

Answer 2

यहां किसी भी निर्भरता या पुस्तकालयों के बिना एक अधिक न्यूनतम विधि है।
इसके लिए नया लाने की आवश्यकता है एपीआई। ( क्या मैं इसका उपयोग कर सकता हूं? )

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(console.log)

इस विधि से आप आसानी से ReadableStream, ArrayBuffer, टेक्स्ट और JSON भी प्राप्त कर सकते हैं।

एक समारोह के रूप में:

const b64toBlob = (base64, type = 'application/octet-stream') => 
  fetch(`data:${type};base64,${base64}`).then(res => res.blob())

---

मैंने जेरेमी के ES6 सिंक संस्करण की ओर एक सरल प्रदर्शन परीक्षण किया।
सिंक संस्करण कुछ समय के लिए UI को ब्लॉक कर देगा। devtool को खुला रखने से भ्रूण का प्रदर्शन धीमा हो सकता है

document.body.innerHTML += '<input autofocus placeholder="try writing">'
// get some dummy gradient image
var img=function(){var a=document.createElement("canvas"),b=a.getContext("2d"),c=b.createLinearGradient(0,0,1500,1500);a.width=a.height=3000;c.addColorStop(0,"red");c.addColorStop(1,"blue");b.fillStyle=c;b.fillRect(0,0,a.width,a.height);return a.toDataURL()}();


async function perf() {
  
  const blob = await fetch(img).then(res => res.blob())
  // turn it to a dataURI
  const url = img
  const b64Data = url.split(',')[1]

  // Jeremy Banks solution
  const b64toBlob = (b64Data, contentType = '', sliceSize=512) => {
    const byteCharacters = atob(b64Data);
    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);
    }
    
    const blob = new Blob(byteArrays, {type: contentType});
    return blob;
  }

  // bench blocking method
  let i = 1000
  console.time('b64')
  while (i--) {
    await b64toBlob(b64Data)
  }
  console.timeEnd('b64')
  
  // bench non blocking
  i = 1000

  // so that the function is not reconstructed each time
  const toBlob = res => res.blob()
  console.time('fetch')
  while (i--) {
    await fetch(url).then(toBlob)
  }
  console.timeEnd('fetch')
  console.log('done')
}

perf()

Comments

क्या यह अभी भी काम करेगा यदि बेस 64-एन्कोडेड स्ट्रिंग का आकार बड़ा है, मान लें कि 665536 वर्णों से बड़ा है, जो ओपेरा में यूआरआई आकारों के लिए सीमा है?

— डैनियल कैट्स

पता नहीं, मुझे पता है कि यह एड्रेसबार की एक सीमा हो सकती है, लेकिन AJAX के साथ काम करना एक अपवाद हो सकता है क्योंकि इसे रेंडर नहीं किया जाना है। आपको इसका परीक्षण करना होगा। अगर यह मुझे जहाँ मैं पहले स्थान में base64 स्ट्रिंग नहीं मिला होता। यह सोचकर कि यह एक बुरा अभ्यास है, डिकोड और एनकोड करने के लिए अधिक मेमोरी और समय लगता है। createObjectURLइसके बजाय readAsDataURLउदाहरण के लिए बहुत बेहतर है। और अगर आप ajax का उपयोग करके फ़ाइलें अपलोड करते हैं, तो FormDataइसके बजाय चुनें JSONया canvas.toBlobइसके बजाय का उपयोग करेंtoDataURL

— अंतहीन

इनलाइन के रूप में और भी बेहतर:await (await fetch(imageDataURL)).blob()

— icl7126

यकीन है, अगर आप नवीनतम ब्राउज़र को लक्षित करते हैं। लेकिन इसके लिए फ़ंक्शन को एक async फ़ंक्शन के अंदर भी होना आवश्यक है। बोलना ... await fetch(url).then(r=>r.blob())सॉर्टर है

— एंडलेस

बहुत साफ समाधान, लेकिन मेरे ज्ञान के अनुसार Access is denied.त्रुटि के कारण IE (पॉलीफ़िल ऑफ के साथ) के साथ काम नहीं करेगा । मुझे लगता है कि fetchबूँद url के तहत बूँद को उजागर URL.createObjectUrlकरता है - उसी तरह करता है - जो ie11 पर काम नहीं करेगा। संदर्भ । शायद IE11 के साथ लाने के लिए कुछ वर्कअराउंड है? यह अन्य सिंक समाधानों की तुलना में बहुत अच्छा लगता है :)

— पापी

Answer 3

अनुकूलित (लेकिन कम पठनीय) कार्यान्वयन:

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

Comments

क्या बाइट्स को ब्लब्स में ढालने का कोई कारण है? अगर मैं उपयोग नहीं करता हूं, तो क्या कोई नुकसान या जोखिम है?

— अल्फ्रेड हुआंग

Ionic 1 / Angular 1. के साथ एंड्रॉइड पर महान काम करता है। स्लाइस की आवश्यकता होती है अन्यथा मैं OOM (Android 6.0.1) में चला जाता हूं।

— बजे जुरगेन 'काशबन' पहलवान

केवल उदाहरण है कि मुझे IE 11 और Chrome दोनों में किसी एंटरप्राइज़ वातावरण में किसी भी दस्तावेज़ प्रकार के साथ काम करने के लिए मिल सकता है।

— santos

यह शानदार है। धन्यवाद!

— elliotwesoff 20

एक स्पष्टीकरण क्रम में होगा। जैसे, यह उच्च प्रदर्शन क्यों करता है?

— पीटर मोर्टेंसन

Answer 4

सभी ब्राउज़र समर्थन के लिए, विशेष रूप से एंड्रॉइड पर, शायद आप इसे जोड़ सकते हैं:

try{
    blob = new Blob(byteArrays, {type : contentType});
}
catch(e){
    // TypeError old Google Chrome and Firefox
    window.BlobBuilder = window.BlobBuilder ||
                         window.WebKitBlobBuilder ||
                         window.MozBlobBuilder ||
                         window.MSBlobBuilder;
    if(e.name == 'TypeError' && window.BlobBuilder){
        var bb = new BlobBuilder();
        bb.append(byteArrays);
        blob = bb.getBlob(contentType);
    }
    else if(e.name == "InvalidStateError"){
        // InvalidStateError (tested on FF13 WinXP)
        blob = new Blob(byteArrays, {type : contentType});
    }
    else{
        // We're screwed, blob constructor unsupported entirely
    }
}

Comments

धन्यवाद, लेकिन आपके द्वारा लिखे गए कोड स्निपेट पर TWO समस्याएँ हैं अगर मैंने इसे सही तरीके से पढ़ा है: (1) अंतिम के भीतर कोड (अंतिम) पर कोड- कोशिश के भीतर मूल कोड के समान ही है (): "blob = नया ब्लॉब (बाइटआर्सेस, {टाइप: कंटेंटटाइप}) "... मुझे पता है कि आप मूल अपवाद के बाद उसी कोड को दोहराने का सुझाव क्यों देते हैं? ... (2) BlobBuilder.append () बाइट्स-सरणियों को स्वीकार नहीं कर सकता है, लेकिन ArrayBuffer। इसलिए, इस बाइट का उपयोग करने से पहले इनपुट बाइट्स-सरणियों को इसके ArrayBuffer में बदल दिया जाना चाहिए। REF: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder

— पाणिनी लंचर

Answer 5

छवि डेटा के लिए, मुझे इसका उपयोग करने में सरल canvas.toBlob(अतुल्यकालिक) लगता है

function b64toBlob(b64, onsuccess, onerror) {
    var img = new Image();

    img.onerror = onerror;

    img.onload = function onload() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(onsuccess);
    };

    img.src = b64;
}

var base64Data = 'data:image/jpg;base64,/9j/4AAQSkZJRgABAQA...';
b64toBlob(base64Data,
    function(blob) {
        var url = window.URL.createObjectURL(blob);
        // do something with url
    }, function(error) {
        // handle error
    });

Comments

मुझे लगता है कि आप इसके साथ कुछ जानकारी ढीली करते हैं ... मेटा जानकारी की तरह इसकी किसी भी छवि को पीएनजी में परिवर्तित करने की तरह है, इसलिए यह एक ही परिणाम नहीं है, यह भी केवल छवियों के लिए काम करता है

— अंतहीन

मुझे लगता है कि आप image/jpgबेस 64 स्ट्रिंग से छवि प्रकार निकालकर इसे सुधार सकते हैं और फिर इसे दूसरे पैरामीटर के रूप में toBlobफ़ंक्शन में पास कर सकते हैं ताकि परिणाम एक ही प्रकार का हो। इसके अलावा मुझे लगता है कि यह सही है - यह सर्वर पर 30% ट्रैफ़िक और आपके डिस्क स्थान (बेस 64 की तुलना में) को बचाता है और यह पारदर्शी पीएनजी के साथ भी अच्छा काम करता है।

— icl7126

फ़ंक्शन 2MB से बड़ी छवियों के साथ क्रैश हो जाता है ... एंड्रॉइड में मुझे अपवाद मिलता है: android.os.TransactionTooLarge

— Ruben

Answer 6

इस उदाहरण को देखें: https://jsfiddle.net/pqhdce2L/

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
    
  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


var contentType = 'image/png';
var b64Data = Your Base64 encode;

var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);

var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

Comments

एक स्पष्टीकरण क्रम में होगा।

— पीटर मोर्टेंसन

Answer 7

मैंने देखा कि जेरेमी जैसे डेटा को स्लाइस करते समय इंटरनेट एक्सप्लोरर 11 अविश्वसनीय रूप से धीमा हो जाता है। क्रोम के लिए यह सही है, लेकिन इंटरनेट एक्सप्लोरर को ब्लॉब-कंस्ट्रक्टर को कटा हुआ डेटा पास करते समय समस्या होती है। मेरी मशीन पर, 5 एमबी डेटा पास करने से इंटरनेट एक्सप्लोरर क्रैश हो जाता है और मेमोरी खपत छत से गुजर रही है। Chrome कुछ ही समय में बूँद बनाता है।

इस कोड को तुलना के लिए चलाएं:

var byteArrays = [],
    megaBytes = 2,
    byteArray = new Uint8Array(megaBytes*1024*1024),
    block,
    blobSlowOnIE, blobFastOnIE,
    i;

for (i = 0; i < (megaBytes*1024); i++) {
    block = new Uint8Array(1024);
    byteArrays.push(block);
}

//debugger;

console.profile("No Slices");
blobSlowOnIE = new Blob(byteArrays, { type: 'text/plain'});
console.profileEnd();

console.profile("Slices");
blobFastOnIE = new Blob([byteArray], { type: 'text/plain'});
console.profileEnd();

इसलिए मैंने जेरेमी द्वारा वर्णित दोनों विधियों को एक समारोह में शामिल करने का निर्णय लिया। इसके लिए क्रेडिट उनके पास जाता है।

function base64toBlob(base64Data, contentType, sliceSize) {

    var byteCharacters,
        byteArray,
        byteNumbers,
        blobData,
        blob;

    contentType = contentType || '';

    byteCharacters = atob(base64Data);

    // Get BLOB data sliced or not
    blobData = sliceSize ? getBlobDataSliced() : getBlobDataAtOnce();

    blob = new Blob(blobData, { type: contentType });

    return blob;


    /*
     * Get BLOB data in one slice.
     * => Fast in Internet Explorer on new Blob(...)
     */
    function getBlobDataAtOnce() {
        byteNumbers = new Array(byteCharacters.length);

        for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }

        byteArray = new Uint8Array(byteNumbers);

        return [byteArray];
    }

    /*
     * Get BLOB data in multiple slices.
     * => Slow in Internet Explorer on new Blob(...)
     */
    function getBlobDataSliced() {

        var slice,
            byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            slice = byteCharacters.slice(offset, offset + sliceSize);

            byteNumbers = new Array(slice.length);

            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            byteArray = new Uint8Array(byteNumbers);

            // Add slice
            byteArrays.push(byteArray);
        }

        return byteArrays;
    }
}

Comments

इसको शामिल करने के लिए धन्यवाद। IE11 (5/2016 और 8/2016 के बीच) के हाल के अपडेट के साथ, सरणियों से बूँदें पैदा करना राम की अधिक मात्रा में परिमाण लेना शुरू कर दिया। एक एकल Uint8Array को ब्लॉग निर्माता में भेजकर, इसने लगभग कोई राम का उपयोग नहीं किया और वास्तव में इस प्रक्रिया को पूरा किया।

— एंड्रयू वोगेल

परीक्षण के नमूने में स्लाइस का आकार 1K से बढ़ाकर 8..16K करने से IE में समय काफी कम हो जाता है। मेरे पीसी के मूल कोड में 5 से 8 सेकंड लगते थे, 8K ब्लॉक वाले कोड में केवल 356ms लगते थे, और 16K ब्लॉकों के लिए 225ms

— विक्टर

Answer 8

मेरे जैसे सभी कॉपी-पेस्ट प्रेमियों के लिए, यहाँ एक पका हुआ डाउनलोड फंक्शन है जो क्रोम, फ़ायरफ़ॉक्स और एज पर काम करता है:

window.saveFile = function (bytesBase64, mimeType, fileName) {
var fileUrl = "data:" + mimeType + ";base64," + bytesBase64;
fetch(fileUrl)
    .then(response => response.blob())
    .then(blob => {
        var link = window.document.createElement("a");
        link.href = window.URL.createObjectURL(blob, { type: mimeType });
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });
}

Comments

createObjectURLएक 2 तर्क ... स्वीकार नहीं करते

— अंतहीन

Answer 9

यदि आप अपने प्रोजेक्ट में एक निर्भरता जोड़कर खड़े हो सकते हैं तो एक बढ़िया blob-utilnpm पैकेज है जो एक आसान base64StringToBlobकार्य प्रदान करता है । एक बार जब package.jsonआप इसे इस तरह से उपयोग कर सकते हैं:

import { base64StringToBlob } from 'blob-util';

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = base64StringToBlob(b64Data, contentType);

// Do whatever you need with your blob...

Answer 10

मैं एक और अधिक घोषणात्मक तरीके से सिंक बेस 64 कन्वर्सेशन पोस्ट कर रहा हूं। जबकि Async fetch().blob()बहुत साफ-सुथरा है और मुझे यह समाधान बहुत पसंद है, यह Internet Explorer 11 पर काम नहीं करता है (और शायद एज - मैंने इस एक का परीक्षण नहीं किया है), यहां तक ​​कि पॉलीफ़िल के साथ - अंतहीन मेरी टिप्पणी पर एक नज़र डालें ' अधिक जानकारी के लिए पोस्ट करें।

const blobPdfFromBase64String = base64String => {
   const byteArray = Uint8Array.from(
     atob(base64String)
       .split('')
       .map(char => char.charCodeAt(0))
   );
  return new Blob([byteArray], { type: 'application/pdf' });
};

बक्शीश

यदि आप इसे प्रिंट करना चाहते हैं तो आप कुछ ऐसा कर सकते हैं:

const isIE11 = !!(window.navigator && window.navigator.msSaveOrOpenBlob); // Or however you want to check it
const printPDF = blob => {
   try {
     isIE11
       ? window.navigator.msSaveOrOpenBlob(blob, 'documents.pdf')
       : printJS(URL.createObjectURL(blob)); // http://printjs.crabbly.com/
   } catch (e) {
     throw PDFError;
   }
};

बोनस एक्स 2 - इंटरनेट एक्सप्लोरर 11 के लिए नए टैब में एक BLOB फ़ाइल खोलना

यदि आप सर्वर पर Base64 स्ट्रिंग के कुछ प्रीप्रोसेसिंग करने में सक्षम हैं, तो आप इसे कुछ URL के तहत उजागर कर सकते हैं और लिंक का उपयोग कर सकते हैं printJS:)

Answer 11

निम्नलिखित मेरा टाइपस्क्रिप्ट कोड है जिसे आसानी से जावास्क्रिप्ट में बदला जा सकता है और आप इसका उपयोग कर सकते हैं

/**
 * Convert BASE64 to BLOB
 * @param Base64Image Pass Base64 image data to convert into the BLOB
 */
private convertBase64ToBlob(Base64Image: any) {
    // Split into two parts
    const parts = Base64Image.split(';base64,');

    // Hold the content type
    const imageType = parts[0].split(':')[1];

    // Decode Base64 string
    const decodedData = window.atob(parts[1]);

    // Create UNIT8ARRAY of size same as row data length
    const uInt8Array = new Uint8Array(decodedData.length);

    // Insert all character code into uInt8Array
    for (let i = 0; i < decodedData.length; ++i) {
        uInt8Array[i] = decodedData.charCodeAt(i);
    }

    // Return BLOB image after conversion
    return new Blob([uInt8Array], { type: imageType });
}

Comments

हालांकि यह कोड स्निपेट समाधान हो सकता है, स्पष्टीकरण सहित वास्तव में आपके पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— जोहान

इसके अलावा, आप टिप्पणियों में क्यों चिल्ला रहे हैं?

— कैनबैक्स

आपके Typescript codeकोड में केवल एक प्रकार है और वह प्रकार है any। जैसे परेशान भी क्यों ??

— zoran404 14

Answer 12

भ्रूण के साथ विधि सबसे अच्छा समाधान है, लेकिन अगर किसी को बिना किसी विधि का उपयोग करने की आवश्यकता है तो यहां यह है, जैसा कि पहले उल्लेख किया गया है, मेरे लिए काम नहीं किया:

function makeblob(dataURL) {
    const BASE64_MARKER = ';base64,';
    const parts = dataURL.split(BASE64_MARKER);
    const contentType = parts[0].split(':')[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], { type: contentType });
}