对于大文件，使用 dataURI 创建 iframe 失败，有解决方法吗？ [复制]

    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>");

    }

最后 iframe 创建如下：

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

对于超过 10MB 的文件，attachBody 会更改为 26 MB，因此无法在新窗口中渲染。是否有任何其他库或 workaorund 可以处理大文件。

UPDATE

我尝试使用画布，但是使用画布时，未显示完整图像，仅显示一部分。

        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>");
        }

您面临的问题很可能是因为您的浏览器设置的字符长度限制。URLs over 2,000 characters will not work in the most popular web browsers. This 所以答案 https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers#answer-417184解释得很好。

或者你可以尝试使用IMG代替IFRAME.

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

工作演示在这里摆弄 https://jsfiddle.net/19hfoyLq/。其中有一个base64编码文件（5.7M）在新窗口中正确打开。

Update 1

对于 pdf 文件，您可以尝试在脚本标记中注入 blob 数据。下面是示例脚本。

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;
};

不过，我还没有测试过。