Tengo una página html simple y quiero dar a los visitantes un botón donde, al hacer clic, se descarga la versión html o mhtml de la página web. Entonces, los usuarios pueden ver la página sin conexión.
Intenté implementar el código "guardar como html", pero estropea mi js, css y html. Sin embargo, Chrome incorporado, el botón de descarga funciona bien.
¿Cómo activar la función 'guardar sin conexión' haciendo clic en el botón? ¿O descargar la página como mhtml directamente?
Mis visitantes son estudiantes ignorantes, por lo que no todos saben que esa función existe en Chrome. Entonces, quiero implementarlo en la página.
Este código debería funcionar siempre que la página se sirva a través de un servidor web, en lugar de una URL file:// . La variable btn debe cambiarse a cualquier elemento que esté usando:
const btn = document.getElementById('download'); btn.addEventListener('click', async () => { const resp = await fetch(location.href); if (resp.ok) { const blob = await resp.blob(); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = document.title; link.click(); setTimeout(() => URL.revokeObjectURL(link.href), 7000); } else { alert('Error downloading webpage'); } });También puede ocultar el botón de descarga si el sitio se ve como un archivo descargado con este código:
if (location.protocol == 'file:') { btn.style.display = 'none'; }