cafe-pdf-pro v1.0.2

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

Events

Methods

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']
}