diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx
index 712a8807..70767714 100644
--- a/src/components/ApiInfo/ApiInfo.tsx
+++ b/src/components/ApiInfo/ApiInfo.tsx
@@ -28,9 +28,9 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
     gotoTextColor: '#0084CE'
   };
 
-  handleHoverState = () => {this.setState({gotoIconColor: '#339DD8', gotoTextColor: '#339DD8'})};
-  handleActiveState = () => {this.setState({gotoIconColor: '#00639B', gotoTextColor: '#00639B'})};
-  handleLeaveState = () => {this.setState({gotoIconColor: '#0084CE', gotoTextColor: '#0084CE'})};
+  handleHoverState = () => { this.setState({ gotoIconColor: '#339DD8', gotoTextColor: '#339DD8' }) };
+  handleActiveState = () => { this.setState({ gotoIconColor: '#00639B', gotoTextColor: '#00639B' }) };
+  handleLeaveState = () => { this.setState({ gotoIconColor: '#0084CE', gotoTextColor: '#0084CE' }) };
 
   handleDownloadClick = e => {
     if (!e.target.href) {
@@ -43,7 +43,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
     const { info, externalDocs } = store.spec;
     const hideDownloadButton = store.options.hideDownloadButton;
 
-    const downloadFilename = info.downloadFileName;
+    const downloadFilename = info.downloadFileName == undefined ? info.title : info.downloadFileName;
     const downloadLink = info.downloadLink;
 
     const license =
@@ -87,39 +87,39 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
         <Row>
           <MiddlePanel className="api-info">
             <ApiHeader>
-              <div style={{width: hasAdditionalDoc? '60%':'', color: '#111B58', fontWeight: 500}}>
+              <div style={{ width: hasAdditionalDoc ? '60%' : '', color: '#111B58', fontWeight: 500 }}>
                 {info.title} {version}
               </div>
-              {hasAdditionalDoc? <div style={{margin: '0 auto'}}
-                          onMouseEnter={this.handleHoverState}
-                          onMouseDown={this.handleActiveState}
-                          onMouseLeave={this.handleLeaveState}>
+              {hasAdditionalDoc ? <div style={{ margin: '0 auto' }}
+                onMouseEnter={this.handleHoverState}
+                onMouseDown={this.handleActiveState}
+                onMouseLeave={this.handleLeaveState}>
                 <AdditionalDocLink
                   target="_blank"
                   href={store.options.additionalDocUrl}
                 >
-                  <span style={{zoom: '1.3'}}>
+                  <span style={{ zoom: '1.3' }}>
                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path opacity="0.75" d="M8 14C4.6912 14 2 11.3088 2 8C2 4.6912 4.6912 2 8 2C11.3088 2 14 4.6912 14 8C14 11.3088 11.3088 14 8 14Z"
-                            fill={this.state.gotoIconColor}/>
-                      <path fillRule="evenodd" clipRule="evenodd" d="M0.799805 8.00005C0.799805 11.9716 4.02826 15.2 7.9998 15.2C11.9713 15.2 15.1998 11.9716 15.1998 8.00005C15.1998 4.02851 11.9713 0.800049 7.9998 0.800049C4.02826 0.800049 0.799805 4.02851 0.799805 8.00005ZM3.32386 11.7561C2.49585 10.7273 1.9998 9.42061 1.9998 8.00005C1.9998 4.69125 4.691 2.00005 7.9998 2.00005C11.3086 2.00005 13.9998 4.69125 13.9998 8.00005C13.9998 11.3088 11.3086 14 7.9998 14C6.58686 14 5.28654 13.5093 4.2603 12.6893L9.87799 7.0716L9.87799 10.0776C9.87799 10.4432 10.1734 10.7386 10.5389 10.7386C10.9044 10.7386 11.1998 10.4432 11.1998 10.0776L11.1998 4.80002L5.92218 4.80002C5.55714 4.79956 5.26127 5.09542 5.26127 5.46093C5.26127 5.82644 5.55667 6.12184 5.92218 6.12184L8.95767 6.12231L3.32386 11.7561Z" fill="white"/>
+                        fill={this.state.gotoIconColor} />
+                      <path fillRule="evenodd" clipRule="evenodd" d="M0.799805 8.00005C0.799805 11.9716 4.02826 15.2 7.9998 15.2C11.9713 15.2 15.1998 11.9716 15.1998 8.00005C15.1998 4.02851 11.9713 0.800049 7.9998 0.800049C4.02826 0.800049 0.799805 4.02851 0.799805 8.00005ZM3.32386 11.7561C2.49585 10.7273 1.9998 9.42061 1.9998 8.00005C1.9998 4.69125 4.691 2.00005 7.9998 2.00005C11.3086 2.00005 13.9998 4.69125 13.9998 8.00005C13.9998 11.3088 11.3086 14 7.9998 14C6.58686 14 5.28654 13.5093 4.2603 12.6893L9.87799 7.0716L9.87799 10.0776C9.87799 10.4432 10.1734 10.7386 10.5389 10.7386C10.9044 10.7386 11.1998 10.4432 11.1998 10.0776L11.1998 4.80002L5.92218 4.80002C5.55714 4.79956 5.26127 5.09542 5.26127 5.46093C5.26127 5.82644 5.55667 6.12184 5.92218 6.12184L8.95767 6.12231L3.32386 11.7561Z" fill="white" />
                     </svg>
                   </span>
-                  <span style={{paddingLeft: '5px', verticalAlign: 'top',
-                    color: this.state.gotoTextColor}}>
+                  <span style={{
+                    paddingLeft: '5px', verticalAlign: 'top',
+                    color: this.state.gotoTextColor
+                  }}>
                     Additional Docs
                   </span>
                 </AdditionalDocLink>
-              </div>:null}
+              </div> : null}
             </ApiHeader>
             {!hideDownloadButton && (
               <p>
                 Download OpenAPI specification:
                 <DownloadButton
-                  download={downloadFilename}
-                  target="_blank"
+                  download={downloadFilename == undefined ? '' : downloadFilename}
                   href={downloadLink}
-                  onClick={this.handleDownloadClick}
                 >
                   Download
                 </DownloadButton>