Tengo una plantilla vue que se ve así:
<template> <div id="printContainer"> <componentA></componentA> <div style="page-break-before:always"> </div> <componentB></componentB> <div style="page-break-before:always"> </div> <componentC></componentC> </div> </template> Quiero descargar el HTML del div "printContainer". ¿Alguna sugerencia?
Puede usar una referencia de plantilla para acceder a printContainer <div> desde el código:
<script setup> import { ref } from 'vue' const printContainer = ref() </script> <template> <div ref="printContainer"> <!-- your components here --> </div> </template> y luego obtener su innerHTML . Por ejemplo, podría tener un botón que registre el innerHTML del contenedor al hacer clic:
<script setup> import { ref } from 'vue' const printContainer = ref() const logContents = () => { console.log('contents', printContainer.value.innerHTML) } </script> <template> <button @click="logContents">Log contents</button> ⋮ </template>