I have web application which is in vue framework. I have to send web page URL as an input and get the innerHTML of that page and download that as a html file by clicking download file.

I have written the vue component and adding the codesandbox sample.

<template>
  <input type="url" v-model="urlPath" />
   <button class="download_button" @click="downloadHtml">Download HTML</button>
</template>

methods

    methods: {
     downloadHtml() {
     let url = this.urlInput;
      fetch(url)
        .then((res) => res.text())
        .then((html) => this.downloadAsFile("report.txt", html));
   },   
   downloadAsFile(name, text) {
  const link = this.createDownloadableLink(name, text);
  const clickEvent = new MouseEvent('click');
  link.dispatchEvent(clickEvent);
},

createDownloadableLink(fileName, content) {
  let link = document.createElement("a");
  link.download = fileName;
  link.href = `data:application/octet-stream,${content}`;
  return link;
}
    }

Here is the Codesandbox example Sandbox Link

Basically, i am designing the vue component where i am giving URL input and download the innerHTML of page content and save it as a HTML. Any help on this part??