导出独立的 swagger-ui

编程问答 2022-05-30

问题描述

我基于问答 Javascript conversion of an OpenAPI V3 json object to Swagger HTML object to update DIV thru jQuery 实现了一个能够上传 openAPI 3 json 并显示 swagger 的 nodejs 网络应用程序。

现在我尝试将生成的 swagger 下载为 HTML 文件。

问题：下载的 swagger 显示良好，但交互（例如单击某个函数时展开函数以显示参数）不起作用。

我正在添加我认为是先决条件的 css 和 js，但它不起作用。

下载的 HTML 是通过此代码完成的，其中一个 Swagger 已正确显示在 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";

我怀疑 document.getElementById(elId).innerHTML; 可能会遗漏显示的 Swagger 的某些部分...

这里是下载的 HTML 的开始。关于缺少什么的任何线索？

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptswaggerswagger-ui