Cafe-PDF-Pro

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

• 😊 Vue 2.0 + pdfjs-dist 3.4.120;
• 😂 Support for modern browsers;
• 🀄 中文文档

Install

npm install cafe-pdf-pro --save

Quick Start

import cafePdfPro from 'cafe-pdf-pro'
Vue.use(cafePdfPro)

// OR
import cafePdfPro from 'cafe-pdf-pro'
export default {
  // ...
  components: {
    cafePdfPro
  }
  // ...
}

Example

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

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

<template>
  <cafe-pdf-pro 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-pro>
</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 | — | — | | 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 |

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='/cmap' 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-pro']
}