Generate a New HTML Document with Javascript

user_14997298 0
Viewed 123

Ok, so all I want to do is : whenever I write something in the Input and press the Button, a new HTML page gets created. But I also want to set the page's name and location. Tried searching it, couldn't find any results...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Books test</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
</head>
<body>
    <input type="text" id="book-input">
    <button id="book-button">Create a book</button>

    <h1>All the books</h1>
    <ul id="books-list"></ul>

    <script src="/app.js" defer></script>
</body>
</html>

Javascript

const bookNameInput = document.getElementById("book-input");
const bookCreateButton = document.getElementById("book-button");
var bookName;
var bookId;

bookCreateButton.addEventListener('click', createBook);

function generateRandomNumber() {
    var randomNumber = Math.floor(1000000000 + Math.random() * 900000000);
    var rn = randomNumber.toString();
    return rn;
}

function createBook() {
    bookName = bookNameInput.value;
    bookId = generateRandomNumber();
    fbn = bookName + '_' + bookId
    var bookLi = document.createElement("li");
    bookLi.classList.add("book-li")
    var bookLiA = document.createElement("a");
    bookLiA.innerText = bookName;
    bookLiA.href = fbn + ".html";
    document.getElementById("books-list").appendChild(bookLi);
    bookLi.appendChild(bookLiA);
    bookNameInput.value = "";
}

Tried using :

const newDoc = document.implementation.createHTMLDocument(title)

But doesn't creates any page...

html javascript
1 Answers

I already answered your question in comments, so I'm writing this down as a answer so it might be helpful for others too.

So as i was saying it is totally possible to save the file directly from the client side without any need of server or special file system permission on client side -

In Short You can do something like this, Follow this step-by-step -

  • Get the value of the text input using input.value
  • Create a Blob out of It
  • Create a DOM element of anchor element with download attribute
  • Convert the Blob to an URL Using URL.createObjectURL and Chane the href of previously created anchor element to the returning url
  • Click on the anchor element without appending it to the DOM

Here is the Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Generate HTML Page</title>
    <style>
      * {
        padding: 0;
        box-sizing: border-box;
        margin: 0;
      }
    </style>
  </head>
  <body style="padding: 20px">
    <textarea
      placeholder="Enter Your Content Here"
      style="width: 100%; height: 500px; font-size: 18px; padding: 18px"
    ></textarea>
    <br /><br />
    <button>Download Text as HTML page</button>

    <script>
      let btn = document.querySelector("button");
      let text = document.querySelector("textarea");
      btn.addEventListener("click", () => {
        if (!/^\s*$/.test(text.value)) {
          let a = document.createElement("a");
          a.setAttribute("download", "download.html");
          let blob = new Blob(text.value.split(""));

          let url = URL.createObjectURL(blob);
          a.href = url;
          a.click();
          text.value = "";
        } else {
          alert("Blank text");
          text.value = "";
        }
      });
    </script>
  </body>
</html>
user_102491760
Related