JavaScript

import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import { Modal } from './Modal';
    
    class Dashboard extends React.Component {
        state = { show: false };

    showModal = () => {
        this.setState({ show: true });
    };

    hideModal = () => {
        this.setState({ show: false });
    };

    render() {
        return (
            <main>
                <h1>React Modal</h1>
                <Modal show={this.state.show} handleClose={this.hideModal}>
                    <p>Modal</p>
                    <p>Data</p>
                </Modal>
                <button type="button" onClick={this.showModal}>
                    open
        </button>
            </main>
        );
    }
    }    
    export default Dashboard;

import React, { Component } from "react";
    import './ModalSS.css';
    
    export const Modal = ({ handleClose, show, children }) => {
        const showHideClassName = show ? "modal display-block" : "modal display-none";
    return (
        <div className={showHideClassName}>
            <section className="modal-main">
                {children}
                <button onClick={handleClose}>close</button>
            </section>
        </div>
     );
    }

body {
    }
    
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }
    
    .modal-main {
        position: fixed;
        background: white;
        width: 80%;
        height: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .display-block {
        display: block;
    }
    
    .display-none {
        display: none;
    }

var base64 = "base64 content";
let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + base64 + "'></iframe>");

[EnableCors("AnotherPolicy")]
    [HttpPost]
    public FileStreamResult Post([FromForm] string communityName, [FromForm] string files) //byte[]
    {
    	var removedInvalidCharsFromFileName = removeInvalidCharsFromFileName(files);
    	var tFiles = removedInvalidCharsFromFileName.Split(',');
    	string rootPath = Configuration.GetValue<string>("ROOT_PATH");
    	string communityPath = rootPath + "\\" + communityName;

	byte[] theZipFile = null;
	FileStreamResult result = null;
	

	using (MemoryStream zipStream = new MemoryStream())
	{
		using (ZipArchive zip = new ZipArchive(zipStream, ZipArchiveMode.Create, true))
		{
			foreach (string attachment in tFiles)
			{
				var zipEntry = zip.CreateEntry(attachment);

				using (FileStream fileStream = new FileStream(communityPath + "\\" + attachment, FileMode.Open))
				using (Stream entryStream = zipEntry.Open())
				{
					fileStream.CopyTo(entryStream);
				}
			}
		}

		theZipFile = zipStream.ToArray();
		result = new FileStreamResult(zipStream, "application/zip") { FileDownloadName = $"{communityName}.zip" };
	}

	//return theZipFile;
	return result;
    }

handleDownload = (e) => {
	e.preventDefault();

	var formData = new FormData();
	formData.append('communityname', this.state.selectedCommunity);
	formData.append('files', JSON.stringify(this.state['checkedFiles']));

	//let env='local';        
	let url = clientConfiguration['filesApi.local'];
	//let tempFiles = clientConfiguration[`tempFiles.${env}`];
	//alert(tempFiles);

	axios({
		method: 'post',
		responseType: 'application/blob',
		contentType: 'application/blob',
		url: url,
		data: formData
	})
		.then(res => {
			console.log(res);
			console.log(res.data);
			let fileName = `${this.state['selectedCommunity']}`
			const arrayBuffer = base64ToArrayBuffer(res.data);
			createAndDownloadBlobFile(arrayBuffer, fileName, 'zip');
		})
		.catch(error => {
			console.log(error.message);
		});
    };

export function createAndDownloadBlobFile(body, filename, extension = 'pdf') {
    const blob = new Blob([body]);
    const fileName = `${filename}.${extension}`;
    if (navigator.msSaveBlob) {
        // IE 10+
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        // Browsers that support HTML5 download attribute
        if (link.download !== undefined) {
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', fileName);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
    }

    export function base64ToArrayBuffer(base64) {
        const binaryString = window.atob(base64); // Comment this if not using base64
        const bytes = new Uint8Array(binaryString.length);
        return bytes.map((byte, i) => binaryString.charCodeAt(i));
    }