index.vue 1.26 KB
Newer Older
Sam Rose's avatar
Sam Rose committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
<template>
  <canvas
    class="pdf-page"
    ref="canvas"
    :data-page="number" />
</template>

<script>
  export default {
    props: {
      page: {
        type: Object,
        required: true,
      },
      number: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        scale: 4,
        rendering: false,
      };
    },
    computed: {
      viewport() {
        return this.page.getViewport(this.scale);
      },
      context() {
        return this.$refs.canvas.getContext('2d');
      },
      renderContext() {
        return {
          canvasContext: this.context,
          viewport: this.viewport,
        };
      },
    },
    mounted() {
      this.$refs.canvas.height = this.viewport.height;
      this.$refs.canvas.width = this.viewport.width;
      this.rendering = true;
      this.page.render(this.renderContext)
        .then(() => { this.rendering = false; })
        .catch(error => this.$emit('pdflaberror', error));
    },
  };
</script>

<style>
.pdf-page {
  margin: 8px auto 0 auto;
  border-top: 1px #ddd solid;
  border-bottom: 1px #ddd solid;
  width: 100%;
}

.pdf-page:first-child {
  margin-top: 0px;
  border-top: 0px;
}

.pdf-page:last-child {
  margin-bottom: 0px;
  border-bottom: 0px;
}
</style>