web-dev-qa-db-ja.com

React単一ページのWebサイトをHTMLとしてエクスポートすることは可能ですか？

Reactとmaterialize-cssを使用する単一ページのWebアプリケーションがあり、プロトタイピングの目的でHTMLを簡単に編集できるように、静的HTMLおよびCSSとしてエクスポートしたいと思います。少なくとも現在の状態のスナップショットをエクスポートすることは可能ですか？

FirefoxとChromeで「ページを保存」を試しましたが、良い結果が得られません。

htmlcssreactjsmaterializemockups
10
Marcin

次の手順に従ってください：-

1。ブラウザで開発者ツール、

2。 select Inspector（firefox）/ Elements（chrome）、

。次にタグを選択します[〜＃〜] html [〜＃〜]、右クリックして、

4。次に、[HTMLとして編集]をクリックします。

これで、すべてのコードをコピーして保存できます。ドキュメントの色と形は変わりませんが、写真を見逃すことになります。幸運を ！ :)

2
Tom

おそらく理想的ではありませんが、ページ全体を変数として保存してダウンロードすることができます。ページが読み込まれた後、ブラウザコンソールでこれを実行します。

var pageHTML = document.documentElement.outerHTML;

var tempEl = document.createElement('a');

tempEl.href = 'data:attachment/text,' + encodeURI(pageHTML);
tempEl.target = '_blank';
tempEl.download = 'thispage.html';
tempEl.click();
1
dommmm

ReactDOMServer モジュールには、Reactアプリケーションを静的HTMLにレンダリングするための関数が含まれています-サーバーで使用するように設計されていますが、あなたを止めるものは何もないと思いますブラウザで使用します（ただし、本番環境ではこれを行わないでください！）

import ReactDOMServer from "react-dom/server";
import App from "./yourComponent";

document.body.innerHTML = ReactDOMServer.renderToStaticMarkup(App);
1
Joe Clay
  var pageHTML = window.document.getElementById('divToPDF').innerHTML;
  let data = new Blob([pageHTML], {type: 'data:attachment/text,'});
  let csvURL = window.URL.createObjectURL(data);
  let tempLink = document.createElement('a');
  tempLink.href = csvURL;
  tempLink.setAttribute('download', 'Graph.html');
  tempLink.click();
0
zakaria mahmud

コードをビルドして、 github.io でホストできます。 次のチュートリアル はそれを達成するのに役立ちます。次に、gh-pagesブランチで生成されたコードをエクスポートされたHTMLとして使用できます。

0
Angel Venchev