github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/PreviewPdf.vue (about)

     1  <template>
     2    <v-dialog v-model="show" content-class="full-height">
     3      <object type="application/pdf" :data="dataUrl" class="object">
     4        <p>
     5          Vous ne pouvez pas visualiser de pdfs. Merci de mettre à jour votre
     6          navigateur (Chrome, Firefox ou Safari sont conseillés).
     7        </p>
     8      </object>
     9    </v-dialog>
    10  </template>
    11  
    12  <script lang="ts">
    13  import Vue from "vue";
    14  import Component from "vue-class-component";
    15  import { Watch } from "vue-property-decorator";
    16  
    17  const PreviewPdfProps = Vue.extend({
    18    props: {
    19      buffer: ArrayBuffer
    20    }
    21  });
    22  
    23  @Component({})
    24  export default class PreviewPdf extends PreviewPdfProps {
    25    dataUrl = "";
    26    show = false;
    27  
    28    @Watch("buffer")
    29    b() {
    30      if (this.buffer) {
    31        this.dataUrl = URL.createObjectURL(
    32          new Blob([this.buffer], { type: "application/pdf" })
    33        );
    34        this.show = true;
    35      }
    36    }
    37  
    38    @Watch("show")
    39    s() {
    40      if (!this.show) {
    41        this.$emit("closed");
    42        URL.revokeObjectURL(this.dataUrl);
    43        this.dataUrl = "";
    44      }
    45    }
    46  }
    47  </script>
    48  
    49  <style>
    50  .full-height {
    51    height: 100%;
    52  }
    53  object.object {
    54    margin: auto;
    55    width: 100%;
    56    height: 98%;
    57  }
    58  </style>