I have a vue template that looks like this-
<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>
I want to download the "printContainer" div's HTML.
Any suggestions?
You can use a template ref to access the printContainer <div> from code:
<script setup>
import { ref } from 'vue'
const printContainer = ref()
</script>
<template>
<div ref="printContainer">
<!-- your components here -->
</div>
</template>
and then get its innerHTML. For example, you could have a button that logs the container's innerHTML when clicked:
<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>