# cafe-pdf-pro

> A PDF viewer based on mozilla's PDF.js.

Latest version **1.0.2** (published 2023-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install cafe-pdf-pro
pnpm add cafe-pdf-pro
yarn add cafe-pdf-pro
bun add cafe-pdf-pro
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-11-27 |
| First published | 2023-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | wangdaodao |
| Maintainers | wangdaodao |
| Keywords | cafe-pdf-pro, vue |

## Links

- npm: https://www.npmjs.com/package/cafe-pdf-pro
- npm.io page: https://npm.io/package/cafe-pdf-pro

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) 3.4.120
- [print-js-updated](https://npm.io/package/print-js-updated.md) ^1.6.1
- [@babel/plugin-transform-private-methods](https://npm.io/package/@babel/plugin-transform-private-methods.md) ^7.22.3

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-11-27
- 1.0.1 — 2023-06-01
- 1.0.0 — 2023-05-30

## README

# Cafe-PDF-Pro

![NPM version](https://img.shields.io/npm/v/cafe-pdf-pro.svg)

> 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`](https://github.com/mozilla/pdfjs-dist/releases/tag/v3.4.120);
* 😂 Support for modern browsers;
* 🀄 [中文文档](./README-zh.md)

## Install

```shell
npm install cafe-pdf-pro --save
```

## Quick Start
```js
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/](http://demo.const.team/pdf-pro/)

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

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

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

---
_Source: https://npm.io/package/cafe-pdf-pro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._