Custom-Cafe-PDF

Render PDF files on Vue pages using pdf.js, supporting text rendering, lazy loading, paging, scaling, and printing.

• 😊 Vue 2.0 + pdfjs-dist 2.3.200;
• Support for modern browsers;
• Just upload the custom-cafe-pdf source code from the new, only for open source use. -zk;

Install

npm install custom-cafe-pdf-zk --save

Quick Start

import cafePdf from 'custom-cafe-pdf-zk'
Vue.use(cafePdf)

// OR
import cafePdf from 'custom-cafe-pdf-zk'
export default {
  // ...
  components: {
    cafePdf
  }
  // ...
}

Example

Demo：http://demo.const.team/pdf/

Note: the use of print, need to cooperate with the print style.

<template>
  <cafe-pdf ref="pdf" @on-success="load" @on-scroll="scroll" :filePath="src">
    <template slot="header">
      pdf-src:<input type="text" v-model.lazy="src" @change="fileChanged">
    </template>
    <template slot="footer">
      <button @click="cw">cw</button>
      <button @click="ccw">ccw</button>
      <button :disabled="currentNum<=1" @click="pre">pre</button>
      <input type="number" :min="1" :max="pageNum" v-model.number="currentNum" @change="pageChange(currentNum)">
      <button :disabled="currentNum>=pageNum" @click="next">next</button>
      <select v-model="scale" @change="setScale">
        <option value="auto">auto</option>
        <option value="page-actual">actual</option>
        <option value="page-fit">fit</option>
        <option value="page-width">width</option>
        <option value="0.50">50%</option>
        <option value="0.75">75%</option>
        <option value="1">100%</option>
        <option value="1.25">125%</option>
        <option value="1.50">150%</option>
        <option value="1.75">175%</option>
        <option value="2">200%</option>
        <option value="3">300%</option>
        <option value="4">400%</option>
      </select>
      <button @click="print">print</button>
    </template>
  </cafe-pdf>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      src: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
      pageNum: null,
      scale: 1,
      currentNum: 1
    };
  },
  components: {},
  methods: {
    fileChanged() {
      this.file = this.src;
    },
    load(val) {
      this.pageNum = val;
    },
    setScale() {
      this.$refs.pdf.changeScale(this.scale);
    },
    scroll(val) {
      this.currentNum = val;
    },
    pre(){
      this.$refs.pdf.prePage();
    },
    next(){
      this.$refs.pdf.nextPage();
    },
    pageChange(val) {
      this.$refs.pdf.goToPage(val);
    },
    print() {
      this.$refs.pdf.printFile();
    },
    cw() {
        this.$refs.pdf.rotateCW();
    },
    ccw() {
        this.$refs.pdf.rotateCCW();
    }
  }
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#app {
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
@media print {
  #app {
    display: none;
  }
}
</style>

Attributes

| Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | filePath | pdf source | string | — | — | | width | pdf width | string, number | — | 100% | | height | pdf height | string, number | — | 100% | | useOnlyCssZoom | only use css zoom | boolean | — | false | | showNav | show catalogue ( If the file does not have a directory, it does not work) | boolean | — | true | | autoWidth | Whether to scale PDF to container width during initialization | boolean | — | false | | textLayerMode | Render in text mode, 0 use canvas，1 use text mode | number | 0/1 | 0 |

Events

| Event Name | Description | Parameters | | ---- | ---- | ---- | | on-success | success event | count page, pdf obj | | on-error | error event | error | | on-scroll | Triggered when scrolling pdf | Current pages , Pdf Object |

Methods

| Method | Description | Parameters | | ---- | ---- | ---- | | scale | scale | Scaling | | prePage | pre page | — | | nextPage | next page | — | | rotateCW | PDF clockwise rotation | — | | rotateCCW | PDF counterclockwise rotation | — | | goToPage | PDF change page | page | | printFile | Print all pdf | scale | | destroyView | PDF destroy | — |

Slot

| name | Description | |------|--------| | header | header slot | | footer | footer slot |