Tengo una aplicación web que está en vue framework. Tengo que enviar la URL de la página web como entrada y obtener el HTML interno de esa página y descargarlo como un archivo html haciendo clic en descargar archivo.
Escribí el componente vue y agregué la muestra de codesandbox.
<template> <input type="url" v-model="urlPath" /> <button class="download_button" @click="downloadHtml">Download HTML</button> </template>métodos
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; } }Aquí está el ejemplo de Codesandbox Sandbox Link
Básicamente, estoy diseñando el componente vue donde doy entrada de URL y descargo el HTML interno del contenido de la página y lo guardo como HTML. Alguna ayuda en esta parte??
Si es una página que desea descargar, ¿por qué no usar un enlace con el atributo de descarga?
De lo contrario, puede usar la API de Filereader
Prueba como a continuación:
<a download href="https://stackoverflow.com/questions/69040140/get-current-web-pages-innerhtml-and-download-it-as-html-file-using-javascriptv" />solo necesita reemplazar su etiqueta de botón a una etiqueta y definir una variable en su componente para reemplazar el valor pasado a href .