Basic Print Preview Usage

Vue PDF Viewer supports printing by dynamically rendering the entire PDF into a hidden print container and triggering the browser’s native print dialog.

How it works

1. Hidden Print Container - A hidden DOM container is created specifically for printing. This container is revealed only during print via @media print.
2. UI Hidden During Print - Toolbars, buttons, modals, and non-essential UI are hidden using @media print rules so that only the PDF content appears on the print preview.
3. Triggering the Print - Once all pages finish rendering, window.print() is called to open the print dialog with the final rendered content.

---

⚠️ Common Issue: CSS Interference

Usually, the print preview works as expected. But, in some cases, print output may appear blank, incomplete, or incorrect.

This may happen because of:

• display: none or visibility: hidden or overflow: hidden being inherited or applied incorrectly.
• position: fixed or position: absolute overlays (e.g. modal masks) covering the content.
• the Viewer component use transformations or scale that don’t print well.

Use @media print to correct the print preview

Here is how you can control your print styles:

• Apply the @media print CSS rule to define styles specifically for printing
• Find the nearest ancestor selector of the Vue PDF Viewer container to style inside @media print correctly for printing
• Ensures the @media print CSS rule is loaded before print. Placing the rule inside its own component or <style scoped> is not recommended as it might not mount when the print and style is not applied

Tips for debugging

• Open the browser’s Print Preview while inspecting the DOM using DevTools
• Temporarily remove complex layout styles and test with minimal CSS

---

CSS Interference Example

For instance, the styles (e.g., position: fixed, z-index, background, overflow: hidden and etc.) applied to the dialog or other components can disrupt with the print preview layout.

A common case is when your project applies overflow: hidden to the html or body tags, which prevents the full content from being visible during printing. This can break the print preview or cause only partial content to be printed.

Here’s an example of a problematic CSS:

<style>
  html, body {
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
</style>

To fix this and ensure the print process works correctly, override this rule specifically for print using @media print:

@media print {
  html, body {
    overflow: visible /* Add !important if needed */;
  }
}

This adjustment allows the browser to display the entire document during printing, even if the on-screen layout uses restrictive overflow styles.

---

Workaround: Download and Print via Browser

If the printing issue still persists, alternatively, you could implement a workaround by downloading and opening a PDF file in a new tab via the browser's native print function.

Here's an example of how to download and open the PDF file in a new tab to print it:

<script setup>
import { ref, computed } from 'vue';
import VPdfViewer from '@vue-pdf-viewer/viewer';

const pdfUrl = ref('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf');

const downloadAndOpenInNewTab = async () => {
  const pdfData = await fetch(pdfUrl.value).then((res) =>
    res.blob()
  );
  // Ensure the PDF file is not downloaded and opened in a new tab.
  const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });
  const blobUrl = URL.createObjectURL(pdfBlob);
  window.open(blobUrl, '_blank');
};
</script>
<template>
  <div style="height: 600px;">
    <VPdfViewer
      :src="pdfUrl"
    />
  </div>
</template>

⚠️ Although this method avoids potential styling issues, the PDF file is from the original src and not from a live input. This means if you fill up a PDF form in Vue PDF Viewer, the printed PDF will not contain updated content.

Remark: As implementing the workaround is not ideal, please reach out to us if you are facing this issue.