Allow pdf app to be hidden

[dallasbeek]

Please describe a feature/problem.
I'm trying to hide the pdf app and add download and print functionality using my own buttons via id-config. I've tried setting the height to 0, display to none, moving it off the page etc... but when I click on my print button I get "Warning: The PDF is not fully loaded for printing." Is there a trick you are aware of to hide the pdf app and allow it to be printed?

My second issue is that all my pdf print previews are off center (pulled left). If I download and print the document it is centered. Is there a setting somewhere to control that?

PS: I'm not sure it makes any difference but I am loading the pdf via computed ArrayBuffer

    pdfDocument() {
      var binary_string = window.atob(this.data.formData.report);
      var len = binary_string.length;
      var bytes = new Uint8Array(len);
      for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
      }
      return bytes.buffer;
    }

[dallasbeek]

For the hidden issue I have a hack-around (I feel a little bit dirty doing this but it's acceptable ). It appears the minimum height to load the document is 6vh. By hooking into the pages-rendered event I'm able to make it disappear although I do get a slight flash. I'm open to better ideas.

<vue-pdf-app ref="pdfReportDoc" :id-config="pdfIdConfig" :pdf="pdfDocument" :file-name="data.formData.fileName" style="height: 6vh;" @pages-rendered="pagesRendered"></vue-pdf-app>

      pagesRendered() {
        let item = document.getElementById('vuePdfApp');
        item.classList.add('d-none');
      }

[Andrey S.]

1. About printing: pdfjs worker needs #viewerContainer to be represented in DOM. It renders pages based on offsetHeight and width of the #viewerContainer. So pages cant be rendered when vuePdfApp display: none and error Warning: The PDF is not fully loaded for printing. occurs. You can use this code:

<template>
  <vue-pdf-app
    ref="vuePdfApp"
    :pdf="pdf"
    :config="{ toolbar: false }"
    @pages-rendered="pagesRendered"
    style="height: 10px; visibility: hidden"
  >
  </vue-pdf-app>
</template>

<script>
import VuePdfApp from "vue-pdf-app";

export default {
  components: {
    VuePdfApp,
  },
  data() {
    return { pdf: "/sample.pdf" };
  },
  methods: {
    pagesRendered() {
      this.$refs.vuePdfApp.$el.classList.add("display-hidden")
    },
  },
};
</script>

<style>
.display-hidden {
  display: none;
}
</style>

Note, if you toggle v-bind:pdf prop you have to make vuePdfApp display: initial again. Otherwise you will get the same warning. If you need just printing may be it is a better decision to use a more light package (vue-pdf for instance)

2. About print preview: please provide source code of your component and a pdf-file

[dallasbeek]

thanks, visibility: hidden helped fix the flicker. I have a couple places in my app where I'm using the pdf and one of them is to display the pdf and vue-pdf has a limitation of not displaying multiple pages. Give me a few days to recreate the print preview issue.

[dallasbeek]

Pretty sure my print issue has something to do with the fact I'm rendering it inside a vue bootstrap modal window. When I did a code pen it rendered properly (no modal). I'll come back to this later next week.