score:-2
i had done this before but was stuck and couldn't seem to find the documentation anywhere. my scenario was i had a react js spa and needed to create a static build to run without a server (through an organisations sharepoint using a static doc repository).
it is pretty simple in the end, run
npm run build
in your project directory and it will create the static build in a 'build' folder ready for you to dump wherever needed. reference: https://create-react-app.dev/docs/production-build/
score:0
you can build your code and host it on github.io. the following tutorial will help you achieve that. you can then use the generated code in the gh-pages branch as your exported html
score:0
this was the first thread i found on sw.. so i think it would be appropriate to copy my own answer from another thread: https://stackoverflow.com/a/72422258/1215913
async function savetofile() {
const handle = await showsavefilepicker({
suggestedname: 'index.html',
types: [{
description: 'html',
accept: {'text/html': ['.html']},
}]
});
const writable = await handle.createwritable();
await writable.write(document.body.parentnode.innerhtml);
writable.close();
}; savetofile();
for more info check the source answer
score:1
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();
score:2
probably not ideal, but you can store the entire page as a variable and download it. run this in your browser console after the page has loaded:
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();
score:2
the reactdomserver module contains a function for rendering a react application to static html - it's designed for use on the server, but i don't think there's anything to stop you using it in the browser (don't do this in production though!)
import reactdomserver from "react-dom/server";
import app from "./yourcomponent";
document.body.innerhtml = reactdomserver.rendertostaticmarkup(app);
score:3
follow the following steps :-
1. in brouser, got to the developer tools,
2. select inspector(firefox)/elements(chrome),
3. then select the tag html, right click on it,
4. then click edit as html.
now you can copy all the code and save it. while the color and shape of the document remains, you will miss the pictures. good luck ! :)
Source: stackoverflow.com
Related Query
- Is it possible to export React single page website as HTML?
- React js : Rendering multiple index html in a single page applications
- Serving a static html page from a single page react app with react router
- Bootstrap Navbar does not work in React JS for single page website
- Embed a single react component created with create-react-library into html page
- Force re-render the react component in the jquery single page application or in static html site?
- add raw HTML with <script> inside Gatsby React page
- Serve another(standalone) page or static file in website built with react
- Can't build React/Next project - found page without a React Component as default export (context api file)
- React.js: Is it possible to convert a react component to HTML DOM's?
- is there a way to build a react app in a single html file?
- structure of a Backbone and React single page app
- Is it possible to scrape a React website (Instagram) with Cheerio?
- How to export react app to pure static html
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- How to organise components for a single page scrolling website in React?
- Is it possible to embed an old JS application in an iframe in new React website
- Show all variations of a component on a single page in React Storybook but still have Knobs?
- Enable single page app react hot reload webpack
- How to Merge React App into existing Website with existing HTML structure
- how to update a route in React Router without re-mounting the component in a single page app?
- Why is React Js called as Single Page Application
- Is it possible to export react component as function in non-react project
- How to call a full html page into a React component
- Is it Possible to redirect to installed flutter app page from react app when open in mobile browser
- How do I reference a React component in a regular HTML page
- Toggle(show/hide) components onClick in single page React component useState
- Next JS Export to static HTML always redirect to home page "/" on refresh
- React seems to be escaping HTML before rendering in the browser causing it to appear as code in the page
- Page refresh error on static website in react
More Query from same tag
- How to prevent click event for one component from another?
- React render specific children
- React material-table filtering
- Why is currentUser.uid undefined
- Child component not being updated with funcional components
- Can't destructure from event.body
- Failed to compile : React Hook "useState" cannot be called at the top level
- Component not re-rendering after state change in redux
- Why do my options created with array map method has empty values (React)?
- How to Remove Arrow on Input type Number with Tailwind CSS
- CSS lower down/cut an edge
- How to get http header(LDAP user attribute set by Nginx) with React component
- Jest - Map through an Array of Items and test their Values
- React: Handling an onChange within mapping render
- How to handle two onClicks in the same component in React?
- meteor.js - upsert does not throw a console error, but doesn't insert data
- Material-UI styles: convert functional component to class component
- React set button to disabled with state
- Firebase Login dont seem to work
- Convert pdf to image before uploading it to s3
- Enzyme check if component mounted without errors on prop types
- Get the Checked Id of the checkBox React
- why the store reset data when write window.location.replace("/home");
- how to use Link to with Tabs component React from Antd Design
- Is there a way to pass id of input tag as a onclick function parameter without actually writing the id value in JSX?
- how to add border to otp input digits
- How to change Step number with Loading Icon in ReactJS
- How can I get a mobile phone’s virtual keyboard height using javascript or css?
- How to style leaflet-PopUp width and hеight on ReactJS?
- Implementing slider with range binded with the number input