Basic Usage

Print using hook (recommended)

Test Name	Test
Canvass
Dynamic Content From Prop	old boring text
Fonts	Some Cool Font Text
Image: Local Import
Image: URL
Input
Input: Checkbox
Input: Date
Input: Radio	Blue Red
Select
TextArea
SVG
Video
Video: With Poster

Click to view code

templatescript setup tsall

html

<template>
  <ion-button @click="handlePrint">Print</ion-button>
  <div ref="componentRef">
    <component-to-print :text="state.text" />
  </div>
</template>

<style scoped></style>

typescript

import { useVueToPrint } from "vue-to-print";
import { reactive, ref } from "vue";
import ComponentToPrint from "./ComponentToPrint.vue";

const componentRef = ref();
const state = reactive({ text: "old boring text" });

const { handlePrint } = useVueToPrint({
  content: componentRef,
  documentTitle: "AwesomeFileName",
  removeAfterPrint: true
});

vue

<script setup lang="ts">
// #region script
import { useVueToPrint } from "vue-to-print";
import { reactive, ref } from "vue";
import ComponentToPrint from "./ComponentToPrint.vue";

const componentRef = ref();
const state = reactive({ text: "old boring text" });

const { handlePrint } = useVueToPrint({
  content: componentRef,
  documentTitle: "AwesomeFileName",
  removeAfterPrint: true
});
// #endregion script
</script>

// #region template
<template>
  <ion-button @click="handlePrint">Print</ion-button>
  <div ref="componentRef">
    <component-to-print :text="state.text" />
  </div>
</template>

<style scoped></style>
// #endregion template

Print using a component

Test Name	Test
Canvass
Dynamic Content From Prop	old boring text
Fonts	Some Cool Font Text
Image: Local Import
Image: URL
Input
Input: Checkbox
Input: Date
Input: Radio	Blue Red
Select
TextArea
SVG
Video
Video: With Poster

Click to view code

templatescript setup tsall

html

<template>
  <vue-to-print
    :content="componentRef"
    document-title="AwesomeFileName"
    remove-after-print
  >
    <template #trigger>
      <ion-button>Print</ion-button>
    </template>
  </vue-to-print>
  <div ref="componentRef">
    <component-to-print :text="state.text" />
  </div>
</template>

<style scoped></style>

typescript

import { VueToPrint } from "vue-to-print";
import { reactive, ref } from "vue";
import ComponentToPrint from "./ComponentToPrint.vue";

const componentRef = ref();
const state = reactive({ text: "old boring text" });

vue

<script setup lang="ts">
// #region script
import { VueToPrint } from "vue-to-print";
import { reactive, ref } from "vue";
import ComponentToPrint from "./ComponentToPrint.vue";

const componentRef = ref();
const state = reactive({ text: "old boring text" });

// #endregion script
</script>

// #region template
<template>
  <vue-to-print
    :content="componentRef"
    document-title="AwesomeFileName"
    remove-after-print
  >
    <template #trigger>
      <ion-button>Print</ion-button>
    </template>
  </vue-to-print>
  <div ref="componentRef">
    <component-to-print :text="state.text" />
  </div>
</template>

<style scoped></style>
// #endregion template

Print Web Components

This example will print Web Components components from Ionic.

Test Name	Test
Canvass
Dynamic Content From Prop	old boring text
Fonts	Some Cool Font Text
Image: Local Import(with ion-img)
Image: URL(with ion-img)
Input(with ion-input)
Input: Checkbox(with ion-checkbox)	I agree to the terms and conditions
Input: Date(with ion-datetime-button)
Input: Radio(with ion-radio)	BlueRed
Select(with ion-select)	AppleBananaOrange
TextArea(with ion-textarea)
SVG
Video
Video: With Poster

Click to view code

templatescript setup tsall

html

<template>
  <ion-button @click="handlePrint">Print</ion-button>
  <div ref="componentRef">
    <shadow-dom-to-print :text="state.text" />
  </div>
</template>

<style scoped></style>

typescript

import { useVueToPrint } from "vue-to-print";
import { reactive, ref } from "vue";
import ShadowDomToPrint from "./ShadowDomToPrint.vue";

const componentRef = ref();
const state = reactive({ text: "old boring text" });

const { handlePrint } = useVueToPrint({
  content: componentRef,
  documentTitle: "AwesomeFileName",
  removeAfterPrint: true
});

vue

<script setup lang="ts">
// #region script
import { useVueToPrint } from "vue-to-print";
import { reactive, ref } from "vue";
import ShadowDomToPrint from "./ShadowDomToPrint.vue";

const componentRef = ref();
const state = reactive({ text: "old boring text" });

const { handlePrint } = useVueToPrint({
  content: componentRef,
  documentTitle: "AwesomeFileName",
  removeAfterPrint: true
});
// #endregion script
</script>

// #region template
<template>
  <ion-button @click="handlePrint">Print</ion-button>
  <div ref="componentRef">
    <shadow-dom-to-print :text="state.text" />
  </div>
</template>

<style scoped></style>
// #endregion template

Basic Usage ​

Print using hook (recommended) ​

Print using a component ​

Print Web Components ​

Basic Usage

Print using hook (recommended)

Print using a component

Print Web Components