Generate and save (html/css/js) files directly on the client's browser

Question

Generate and save (html/css/js) files directly on the client's browser

Recently, I created a code playground using React similar to liveweave. Users can save their "code playgrounds" and access them later by utilizing Firebase for the database. These "code playgrounds" consist of HTML, CSS, and JavaScript elements. My goal now is to implement a feature that allows users to download their playgrounds in three separate files (one for each language).

1) Is there a way to generate HTML, CSS, and JavaScript files with content on the client-side?

2) If it's possible, could these files be grouped into a .rar file on the client-side as well?

3) If generating files on the client-side isn't feasible or optimal, how would you suggest tackling this issue?

I'm considering creating an Express server to fetch data from the database and then respond with the necessary files, but I'm interested in exploring client-side solutions first.

javascript html css express

Answer 1

Answer №1

After weighing my options, I ultimately opted for the fileSaver.js package.

import { saveAs } from "file-saver";
const saveFiles = () => {
    var blob = new Blob([makeHtml(getDocumentCode())], {
      type: "text/plain;charset=utf-8",
    });
    saveAs(blob, `${getFileName()}.html`);
  };

The initial step involves creating a blob from the combined content of the file; in this instance, it consisted of HTML, CSS, and JS code. The makeHtml function is responsible for constructing the HTML document. Subsequently, pass that blob to the saveAs function with the appropriate file name and extension. You can then utilize the saveFiles function in response to various events, such as onClick.

<button onClick={saveFile}>Download<button/>

Answer 2

After weighing my options, I ultimately opted for the fileSaver.js package.

import { saveAs } from "file-saver";
const saveFiles = () => {
    var blob = new Blob([makeHtml(getDocumentCode())], {
      type: "text/plain;charset=utf-8",
    });
    saveAs(blob, `${getFileName()}.html`);
  };

The initial step involves creating a blob from the combined content of the file; in this instance, it consisted of HTML, CSS, and JS code. The makeHtml function is responsible for constructing the HTML document. Subsequently, pass that blob to the saveAs function with the appropriate file name and extension. You can then utilize the saveFiles function in response to various events, such as onClick.

<button onClick={saveFile}>Download<button/>

Generate and save (html/css/js) files directly on the client's browser

Answer №1

Similar questions

javascript to enable me to collapse an open accordion

Increasing the height of list items

Fade In and Contemplate CSS, Not Effective

Using Cocoon Gem in Rails 5 to create nested forms within nested forms

Is hard coding permissions in the frontend considered an effective approach?

Categorize an array by shared values

"Utilizing jQuery and Bootstrap 4 in TypeScript, attempting to close modal window using jQuery is not functioning

Is it possible to personalize the Carousel-indicators feature within react-responsive-carousel?

Clickable link in popup window using fancybox

Receiving numerous requests within the useEffect Hook

Tips on causing npm to fail when a warning is encountered

Message Flash Node.js

"Unleashing the Glamour: Tips for Decorating an Amazing Ajax Pop

Ensuring the correct range with HTML TextBoxFor

What is the process for saving a file that has been uploaded to a form onto the disk?

Having trouble with Bing search API not functioning properly with AJAX?

Include a carrot icon on a navigation element that is currently active, ensuring it does not disrupt the position of the navigation icon within the container

jQuery registers the enter event, but does not proceed to trigger the enter action

Prevent the ability to reload and use the F5 key on my PHP page

How can I change an array to a string in JavaScript/jQuery and add a specific