How to export a Vue component in word format?

Question

I have a vue template that looks like this-

<template>
  <div id="printContainer">
    <componentA></componentA>
    <div style="page-break-before:always">&nbsp;</div>
    <componentB></componentB>
    <div style="page-break-before:always">&nbsp;</div>
    <componentC></componentC>
  </div>
</template>

I want to download the "printContainer" div's HTML. Any suggestions?

Answer 1

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>

demo