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;

Install

npm install cafe-pdf --save

Quick Start

import cafePdf from 'cafe-pdf'
import 'cafe-pdf/lib/index.css'
Vue.use(cafePdf)

// OR
import cafePdf from 'cafe-pdf'
import 'cafe-pdf/lib/index.css'
export default {
  // ...
  components: {
    cafePdf
  }
  // ...
}

Example

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

<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%;
}
</style>

Attributes

| Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | filePath | pdf source | string | — | — | | workerSrc | workerSrc source | string | — | https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js | | cMapUrl | cMap source | string | — | https://cdn.jsdelivr.net/npm/[email protected]/cmaps/ | | 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 | | printLoadingText | print loading text | string | — | Loading…… |

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 | | on-progress | Loading progress | {loaded, total} |

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 | | catalogue | catalogue slot |

Constructor

This component defaults to using the jsdelivr CDN service. If you need to use local resources, please copy the cmaps and pdf.worker.min.js resources to the static resource directory, such as public.

Configure cMapUrl='/cmaps' in the component for cmaps.

Configure workerSrc='/pdf.worker.min.js' in the component for workerSrc.

Note the version of @vue/cli-service. If the version is ~4.50, please configure vue.config.js:

module.exports = {
  transpileDependencies: ['cafe-pdf']
}