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/pdfjs-dist@2.3.200/build/pdf.worker.min.js
cMapUrl	cMap source	string	—	https://cdn.jsdelivr.net/npm/pdfjs-dist@2.3.200/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']
}