Creating iframe with dataURI fails for large files, any workaround?

Question

    function openNewWindow(strPreviewId) {
        let newWindowViewer = window.open("");
        var index = mapPreviewIdWithFile[strPreviewId].indexOf('base64,');
        var attachBody = mapPreviewIdWithFile[strPreviewId].substring(index + 7);
        var attachmentMimeType = mapPreviewIdWithFile[strPreviewId].substring(0, index + 7);
        newWindowViewer.document.write("<iframe width='100%' height='100%' src='" + attachmentMimeType + " " + encodeURI(attachBody) + "'></iframe>");

    }

finally the iframe gets created like below:

<iframe width="100%" height="100%" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAA9AAAALaCAYAAADZQrs6AAAAAXNSR0IArs4..."></iframe>

For files like more than 10MB the attachBody changes to 26 MB, thus it fails to render in the new window. Is there any other library or workaorund which handles large files.

UPDATE

I was trying with canvas, but with canvas the full inage is bnot being shown, only a part is being shown.

        if (attachmentMimeType.indexOf('bmp') > -1 || attachmentMimeType.indexOf('gif') > -1 || attachmentMimeType.indexOf('jpeg') > -1 ||
            attachmentMimeType.indexOf('jpg') > -1 || attachmentMimeType.indexOf('pdf') > -1 || attachmentMimeType.indexOf('png') > -1) {
            newWindowViewer.document.write('<canvas id="c"></canvas>');
            var canvas = newWindowViewer.document.getElementById("c");
            var ctx = canvas.getContext("2d");

            var image = new Image();
            image.onload = function() {
                ctx.drawImage(image, 0, 0, image.height, image.width);
            };
            image.src = attachmentMimeType + " " + encodeURI(attachBody);
        } else {
            newWindowViewer.document.write("<iframe width='100%' height='100%' src='" + attachmentMimeType + " " + encodeURI(attachBody) + "'></iframe>");
        }

Store you file as a Blob in memory. Make the iframe point to this Blob through a blobURI. Ps: if the file is served from an , then it's already a Blob. — Kaiido, Oct 22 '19 at 09:27

James · Accepted Answer · 2019-10-22T09:33:09.137

The issue which you are facing is most probably because of the character length limit which is set for your brower. URLs over 2,000 characters will not work in the most popular web browsers. This SO answer explains it very well.

Alternatively you can try using IMG instead of IFRAME.

let attachBody = ""; // Add base64 string
let newWindowViewer = window.open("");
newWindowViewer.document.write("<img src=\""+ attachBody +"\" >");

Working demo fiddle here. Which is having a base64 encoded file(5.7M) opening properly in a new window.

Update 1

For pdf file you try by injecting blob data in a script tag. A sample script below.

printPreview = (data, type = 'application/pdf') => {
    let blob = null;
    blob = this.b64toBlob(data, type);
    const blobURL = URL.createObjectURL(blob);
    const newWindowViewer = window.open(blobURL);
    const theDoc = newWindowViewer.document;
    const theScript = theDoc.createElement('script');
    function injectThis() {
        window.print();
    }
    theScript.innerHTML = `window.onload = ${injectThis.toString()};`;
    theDoc.body.appendChild(theScript);
};

b64toBlob = (content, contentType) => {
    contentType = contentType || '';
    const sliceSize = 512;
     // method which converts base64 to binary
    const byteCharacters = window.atob(content); 

    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
    }); // statement which creates the blob
    return blob;
};

However, I've not tested it.

but this would fail for pdf. I have to write something generic whcih would work for any file type. — Nagendra Singh, Oct 22 '19 at 09:11
You can add condition for `newWindowViewer.document.write` statement to handle pdf in `iframe` and images in `img`. — James, Oct 22 '19 at 09:14
Yes, but even for large pdfs it fails to display anything. Jjust converting it to base64 — Nagendra Singh, Oct 22 '19 at 09:16
I don't think you will be able to view most pdf files if you `encode` and open in iframe. — James, Oct 22 '19 at 09:20

Creating iframe with dataURI fails for large files, any workaround?

1 Answers1

Update 1

Linked