Is there a way to implement window printing within a Vue modal?

Question

Is there a way to implement window printing within a Vue modal?

Behold my brilliant Vue component:

<template>
    ...
    <b-modal id="modalInvoice" size="lg"  title="Invoice">
        <Invoice/>
        <div slot="modal-footer" class="w-100"> 
            <b-btn size="sm" class="float-right" variant="warning" @click="show=false">
                <i class="fa fa-print"></i> Print
            </b-btn>
        </div>
    </b-modal>

    ...
        <b-btn variant="warning" class="btn-square mt-2" v-b-modal.modalInvoice @click="checkout()"><i class="fa fa-credit-card-alt"></i> Checkout </b-btn>
    ...
</template>
<script>
    ...
    export default {
        ...
        methods: {
            print() {
                window.print()
            }
        }
    }
</script>

The issue at hand arises when clicking on the print button. The entire website appears in the print preview, while the intention was for only the modal content to be displayed.

A query emerges - how can this printing predicament be resolved?

javascript vue.js vuejs2 bootstrap-modal vue-component

Answer 1

Answer №1

To achieve this, one method is to duplicate the modal and utilize CSS to control the visibility of the content being printed:

print () {
  const invoiceModal = document.getElementById("modalInvoice");
  const clonedModal = invoiceModal.cloneNode(true);
  let printSection = document.getElementById("print");

  if (!printSection) {
     printSection = document.createElement("div");
     printSection.id = "print";
     document.body.appendChild(printSection);
  }

  printSection.innerHTML = "";
  printSection.appendChild(clonedModal);
  window.print();
}

@media screen {
  #print {
    display: none;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #print, #print * {
    visibility: visible;
  }
  #print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Answer 2

To achieve this, one method is to duplicate the modal and utilize CSS to control the visibility of the content being printed:

print () {
  const invoiceModal = document.getElementById("modalInvoice");
  const clonedModal = invoiceModal.cloneNode(true);
  let printSection = document.getElementById("print");

  if (!printSection) {
     printSection = document.createElement("div");
     printSection.id = "print";
     document.body.appendChild(printSection);
  }

  printSection.innerHTML = "";
  printSection.appendChild(clonedModal);
  window.print();
}

@media screen {
  #print {
    display: none;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #print, #print * {
    visibility: visible;
  }
  #print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Answer 3

Answer №2

Enjoyed Brian's response, so I decided to create my own version using Vue 2 and Typescript

display(): void {
const modal = this.$refs['modalContent'] as HTMLElement;
const clonedModal: Node | null =
  modal && modal.cloneNode(true);

let displaySection = this.$refs.displayArea as HTMLElement;
if (!displaySection) {
  displaySection = document.createElement('div');
  displaySection.id = 'printPreview';
  document.body.appendChild(displaySection);
}

displaySection.innerHTML = '';
clonedModal && displaySection.appendChild(clonedModal);
window.print();
}

Answer 4

Enjoyed Brian's response, so I decided to create my own version using Vue 2 and Typescript

display(): void {
const modal = this.$refs['modalContent'] as HTMLElement;
const clonedModal: Node | null =
  modal && modal.cloneNode(true);

let displaySection = this.$refs.displayArea as HTMLElement;
if (!displaySection) {
  displaySection = document.createElement('div');
  displaySection.id = 'printPreview';
  document.body.appendChild(displaySection);
}

displaySection.innerHTML = '';
clonedModal && displaySection.appendChild(clonedModal);
window.print();
}

Is there a way to implement window printing within a Vue modal?

Answer №1

Answer №2

Similar questions

showcasing every element from a multi-layered array within its own separate div using JavaScript

Is it possible to deploy a build across various website subdomains without altering user data?

Having trouble formatting JSON data in a jQuery datatable with accurate information

What could be causing my code to have a pending promise when I am using await?

Is the function failing to return a value?

Limiting the table width in TinyMCE

I initially had ngRoute set up in my app, but decided to make the switch to ui-router. However, now it seems like

Efficiently accessing and displaying nested models in AngularJS

Tips for stopping Angular from rendering a directive that is producing incorrect results after an error is thrown

There was an error: Unable to access the 'axis' property because it is undefined

What could be causing my express router.get endpoints with multiple paths to only render text?

Navigating the Angular Element: A Guide to Clicking Buttons within Modal-Dialogs Using Protractor

Troubleshooting undefined index issue when retrieving data from database (related to Ajax functionality)

Is there a way to adjust the position of a Bootstrap 5 dropdown menu in real-time using javascript or jQuery?

Fetch() is not executing in the expected sequence

Using JavaScript to issue a Windows authentication request for Kerberos

Having trouble receiving a Java Response through Ajax when using dataType: "jsonp", but it works when using dataType: "text"

What is the best way to smoothly add or remove several classes to a div while scrolling?

Setting a specific time for a div element with opacity: A step-by-step guide

Angular UI Bootstrap Typeahead - Apply a class when the element is added to the document body