cafe-pdf

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

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