CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Nhan Nguyen
Nhan Nguyen

Reputation: 405

How to create a button download html content in react

I am trying to create a download button for html content in my page. Here is my project:

enter image description here

and I can drag to reorder planets like this:

enter image description here

How can I create a buttton to download current html content?

Update following code in App.js:

const getComponentsFromSearchQuery = (query) => {
  if (!query) return Object.values(planets);

  const filter = query.split(",").map((v) => v.trim());

  return (
    Object.entries(planets)
      .filter(([k]) => filter.some((f) => k.indexOf(f) !== -1))
      .map(([k, v]) => v)
  );
};

function App() {
  const [searchQuery, setSearchQuery] = useState("");
  const [generateClick, setGenerateClick] = useState(false);

  const [components, setComponents] = useState(
    getComponentsFromSearchQuery("")
  );

  const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
  };

  const handleOnDragEnd = (result) => {
    if (!result.destination) return;

    const items = Array.from(components);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    setComponents(items);
  };

  const handleSubmit = async () => {
    setComponents(getComponentsFromSearchQuery(searchQuery));
    setGenerateClick(true);
  };

  return (
    <div className="App">

      <DragDropContext onDragEnd={handleOnDragEnd}>
        <Droppable droppableId="planets">
          {(provided) => (
            <ul {...provided.droppableProps} ref={provided.innerRef}>
              {components.map((C, index) => {
                return (
                  <Draggable key={C.name} draggableId={C.name} index={index}>
                    {(provided) => (
                      <li
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        <C />
                      </li>
                    )}
                  </Draggable>
                );
              })}
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
      </DragDropContext>

How can I download the html content when I reorder the list of planets??

Upvotes: 0

Views: 116

Answers (1)

欧阳斌
欧阳斌

Reputation: 2351

function Content() {
  const content = `
  <!DOCTYPE >
  <html>
    <head><head>
    <body>
      <div>Some Value</div>
    </body>
  </html>
  `;
  const url = React.useMemo(() => {
    const blob = new Blob([content], { type: 'text/html;charset=utf-8' });
    return URL.createObjectURL(blob);
  }, [content]);
  return (
    <a href={url} download="index.html">
      download
    </a>
  );
}

Upvotes: 1

Related Questions