0

I implemented a nodejs web app able to upload an openAPI 3 json, and display the swagger, based on Q&A Javascript conversion of an OpenAPI V3 json object to Swagger HTML object to update DIV thru jQuery .

Now I try to implement a download of the generated swagger, as a HTML file.

Problem: the downloaded swagger is well displayed, but interactions (like expanding a function when clicking on it to display parameters) are not working.

I'm adding the css and js which I believe to be prerequisites, but it does not work.

Downloaded HTML is done thru this code, one the Swagger has been correctly displayed in the Webapp :

    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');

    var finalHTML = "";
    
    finalHTML += "<!doctype html>\n";
    finalHTML += "<html>\n";
    finalHTML += "<head>\n";
    finalHTML += "<meta charset=\"utf-8\">\n";
    finalHTML += "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n";
    finalHTML += "<link rel=\"stylesheet\" type=\"text/css\" href=\"http://localhost:3000/swagger-ui//swagger-ui.css\">\n";
    finalHTML += "</head>\n";
    finalHTML += "<body>\n";
    finalHTML += "<script src=\"http://localhost:3000/swagger-ui//swagger-ui-bundle.js\"></script>\n";
    finalHTML += "<script src=\"http://localhost:3000/swagger-ui//swagger-ui-standalone-preset.js\"></script>\n";
    finalHTML += elHtml;finalHTML += "\n</body>\n";
    finalHTML += "</html>\n";

I suspect document.getElementById(elId).innerHTML; to maybe miss some parts of the displayed Swagger...

Here is the start of downloaded HTML. Any clue on what's missing ?

<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="http://localhost:3000/swagger-ui//swagger-ui.css">
</head>
<body>
<script src="http://localhost:3000/swagger-ui//swagger-ui-bundle.js"></script>
<script src="http://localhost:3000/swagger-ui//swagger-ui-standalone-preset.js"></script>
<div data-reactroot="" class="swagger-ui"><div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-assets"><defs><symbol viewBox="0 0 20 20" id="unlocked"><path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path></symbol><symbol viewBox="0 0 20 20" id="locked"><path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"></path></symbol><symbol viewBox="0 0 20 20" id="close"><path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"></path></symbol><symbol viewBox="0 0 20 20" id="large-arrow"><path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"></path></symbol><symbol viewBox="0 0 20 20" id="large-arrow-down"><path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"></path></symbol><symbol viewBox="0 0 24 24" id="jump-to"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"></path></symbol><symbol viewBox="0 0 24 24" id="expand"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></symbol></defs></svg></div><div><!-- react-empty: 20 --><div class="information-container wrapper"><section class="block col-12"><div><div class="info"><hgroup class="main"><h2 class="title"><!-- react-text: 27 -->Swagger Petstore<!-- /react-text --><span><small><pre class="version"><!-- react-text: 31 --> <!-- /react-text --><!-- react-text: 32 -->1.0.0<!-- /react-text --><!-- react-text: 33 --> <!-- /react-text --></pre></small><small class="version-stamp"><pre class="version">OAS3</pre></small></span></h2><!-- react-text: 36 --><!-- /react-text --></hgroup><div class="description"><div class="renderedMarkdown"><p>A sample API that uses a petstore as an example to demonstrate features in the OpenAPI 3.0 specification</p></div></div><div class="info__tos"><a target="_blank" href="http://swagger.io/terms/" rel="noopener noreferrer" class="link">Terms of service</a></div><div class="info__contact"><div><a href="http://swagger.io" target="_blank" rel="noopener noreferrer" class="link"><!-- react-text: 44 -->Swagger API Team<!-- /react-text --><!-- react-text: 45 --> - Website<!-- /react-text --></a></div><a href="mailto:apiteam@swagger.io" rel="noopener noreferrer" class="link">Send email to Swagger API Team</a></div><div class="info__license"><a target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0.html" rel="noopener noreferrer" class="link">Apache 2.0</a></div><a class="info__extdocs link" target="_blank" href="" rel="noopener noreferrer"></a></div></div></section></div><div class="scheme-container"><section class="schemes wrapper block col-12"><div><span class="servers-title">Servers</span><div class="servers"><label for="servers"><select><option value="http://petstore.swagger.io/api">http://petstore.swagger.io/api</option></select></label></div></div></section></div><div></div><div class="wrapper"><section class="block col-12 block-desktop col-12-desktop"><div><span><div class="opblock-tag-section is-open"><h4 class="opblock-tag no-desc" id="operations-tag-default" data-tag="default" data-is-open="true"><a class="nostyle"><span>default</span></a><small></small><div></div><button class="expand-operation" title="Collapse operation"><svg class="arrow" width="20" height="20"><use href="#large-arrow-down" xlink:href="#large-arrow-down"></use></svg></button></h4><div class="no-margin"><!-- react-text: 73 --> <!-- /react-text --><span><div class="opblock opblock-get" id="operations-default-findPets"><div class="opblock-summary opblock-summary-get"><span class="opblock-summary-method">GET</span><span class="opblock-summary-path" data-path="/pets"><a class="nostyle"><span>​/pets</span></a></span><div class="opblock-summary-description"></div><!-- react-empty: 82 --></div><noscript></noscript></div></span><span><div class="opblock opblock-post" id="operations-default-addPet"><div class="opblock-summary opblock-summary-post"><span class="opblock-summary-method">POST</span><span class="opblock-summary-path" data-path="/pets"><a class="nostyle"><span>​/pets</span></a></span><div class="opblock-summary-description"></div><!-- react-empty: 92 --></div><noscript></noscript></div></span><span><div class="opblock opblock-get" id="operations-default-find_pet_by_id"><div class="opblock-summary opblock-summary-get"><span class="opblock-summary-method">GET</span><span class="opblock-summary-path" data-path="/pets/{id}"><a class="nostyle"><span>​/pets​/{id}</span></a></span><div class="opblock-summary-description"></div><!-- react-empty: 102 --></div><noscript></noscript></div></span><span><div class="opblock opblock-delete" id="operations-default-deletePet"><div class="opblock-summary opblock-summary-delete"><span class="opblock-summary-method">DELETE</span><span class="opblock-summary-path" data-path="/pets/{id}"><a class="nostyle"><span>​/pets​/{id}</span></a></span><div class="opblock-summary-description"></div><!-- react-empty: 112 --></div><noscript></noscript></div></span><!-- react-text: 114 --> <!-- /react-text --></div></div></span></div></section></div><div class="wrapper"><section class="block col-12 block-desktop col-12-desktop"><section class="models is-open"><h4><span>Schemas</span><svg width="20" height="20"><use xlink:href="#large-arrow-down"></use></svg></h4><div class="no-margin"><!-- react-text: 123 --> <!-- /react-text --><div id="model-Pet" class="model-container" data-name="Pet"><span class="models-jump-to-path"><!-- react-empty: 126 --></span><span class="model-box"><span class="pointer"><span class="model-box"><span class="model model-title">Pet</span></span></span><span class="pointer"><span class="model-toggle collapsed"></span></span><!-- react-text: 133 --> <!-- /react-text --></span></div><div id="model-NewPet" class="model-container" data-name="NewPet"><span class="models-jump-to-path"><!-- react-empty: 136 --></span><span class="model-box"><span class="pointer"><span class="model-box"><span class="model model-title">NewPet</span></span></span><span class="pointer"><span class="model-toggle collapsed"></span></span><!-- react-text: 143 --> <!-- /react-text --></span></div><div id="model-Error" class="model-container" data-name="Error"><span class="models-jump-to-path"><!-- react-empty: 146 --></span><span class="model-box"><span class="pointer"><span class="model-box"><span class="model model-title">Error</span></span></span><span class="pointer"><span class="model-toggle collapsed"></span></span><!-- react-text: 153 --> <!-- /react-text --></span></div><!-- react-text: 154 --> <!-- /react-text --></div></section></section></div></div></div>


</body></html>
Fred
  • 49
  • 2
  • 8
  • 1) In [this answer](https://stackoverflow.com/a/46238640/113116), the `` only contains the CSS ``, and scripts are put in the ``. Can you try this and does this resolve the issue? 2) Validate your OpenAPI YAML/JSON file e.g. using https://editor.swagger.io to make sure it has no syntax errors. 3) Are there any errors on the "Console" tab of browser dev tools when you expand operations in Swagger UI? 4) Please also post your `SwaggerUIBundle` initialization code. – Helen Jan 13 '21 at 07:00
  • 1) I changed scripts location to `` but the problem remains 2) I validated JSON, there's no error thru [link]editor.swagger.io[link] 3) no error in in the console (tried with Safari & Chrome) when clicking on a function to expand it and see it"s parameters. Adding now the downloaded 'code'HTML'code' to my initial question. – Fred Jan 13 '21 at 11:18
  • If you're trying to download a standalone .html file, then the problem probably lies in the fact that your script tags are referring to a local web server. That server probably isn't running on the computer of whoever downloads the html. You need to update those paths to be relative to the .html file (and include them in the download) – Magnus Bull Mar 30 '22 at 08:39

0 Answers0