hendrasyp/BlobDataViewer.html

## BlobDataViewer.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Document Viewer</title>
</head>
<body style="overflow: hidden;">
    <div id="objviewer"> </div>
    <script type="text/javascript">
        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 b64Data = '<%=Objects %>';
        const contentType = '<%=FileMime %>';
        console.log('<%=TmpFileMime %>');
        console.log(contentType);
        const blob = b64toBlob(b64Data, contentType);
        const blobUrl = URL.createObjectURL(blob);

        if (contentType == 'application/pdf') {
            const obj = document.createElement('object');
            obj.data = blobUrl;
            obj.type = contentType;
            obj.style = 'position: absolute; width: 100%; height: 100%';
            document.getElementById('objviewer').appendChild(obj);
        } else {
            const img = document.createElement('img');
            img.src = blobUrl;
            img.style = 'position: absolute; width: 100%; height: 100%';
            document.getElementById('objviewer').appendChild(img);
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<title>Document Viewer</title>
	</head>
	<body style="overflow: hidden;">
	<div id="objviewer"> </div>
	<script type="text/javascript">
	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 b64Data = '<%=Objects %>';
	const contentType = '<%=FileMime %>';
	console.log('<%=TmpFileMime %>');
	console.log(contentType);
	const blob = b64toBlob(b64Data, contentType);
	const blobUrl = URL.createObjectURL(blob);

	if (contentType == 'application/pdf') {
	const obj = document.createElement('object');
	obj.data = blobUrl;
	obj.type = contentType;
	obj.style = 'position: absolute; width: 100%; height: 100%';
	document.getElementById('objviewer').appendChild(obj);
	} else {
	const img = document.createElement('img');
	img.src = blobUrl;
	img.style = 'position: absolute; width: 100%; height: 100%';
	document.getElementById('objviewer').appendChild(img);
	}
	</script>
	</body>
	</html>