# vue-pdf-renderer

> A Vue component for rendering a PDF using the html5 embed tag.

Latest version **1.0.1** (published 2020-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-pdf-renderer
pnpm add vue-pdf-renderer
yarn add vue-pdf-renderer
bun add vue-pdf-renderer
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-01-28 |
| First published | 2020-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 40.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eddie Rodriguez |
| Maintainers | tandrionos |
| Keywords | vue, html5, pdf, embed |

## Links

- npm: https://www.npmjs.com/package/vue-pdf-renderer
- Repository: https://github.com/tandrionos/Vue-PDF-Renderer
- Homepage: https://github.com/tandrionos/Vue-PDF-Renderer#readme
- Issues: https://github.com/tandrionos/Vue-PDF-Renderer/issues
- npm.io page: https://npm.io/package/vue-pdf-renderer

## Dependencies (1)

- [bowser](https://npm.io/package/bowser.md) ^2.8.1

## 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.1 (latest) — 2020-01-28
- 1.0.0 — 2020-01-28

## README

# Vue Pdf Renderer

<p align="center">
    <a href="https://www.npmjs.com/package/vue-pdf-renderer"><img src="https://img.shields.io/npm/v/vue-pdf-renderer.svg" /></a>
    <a href="https://www.npmjs.com/package/vue-pdf-renderer"><img src="https://img.shields.io/npm/dt/vue-pdf-renderer.svg" /></a>
    <a href="https://github.com/tandrionos/vue-pdf-renderer/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/vue-pdf-renderer.svg" /></a>
</p>

> Vue Pdf Renderer is a component that allows you to render PDFs from file uploads in most modern browsers

## Getting started

First of all you'll need [Vue.js](https://vuejs.org/)

You'll then need to install the package via npm

```bash
npm install vue-pdf-renderer
```

Import the component wherever you need it

```javascript
import PdfRenderer from 'vue-pdf-renderer';

export default {
  name: "HelloFile",

  components: {
    PdfRenderer
  },
  ...
```

The component only has one ```file``` prop. The following component uses a file input to update the pdf we're rendering on change. I'm not doing any validation but this will only work with PDFs. 

```js
<template>
  <div>
    <input type="file" @change="fileChange" />
    <div class="fifty">
      <pdf-renderer :file="file" />
    </div>
  </div>
</template>

<script>
import PdfRenderer from "vue-pdf-renderer";

export default {
  name: "HelloFile",

  components: {
    PdfRenderer
  },

  data() {
    return {
      file: null
    };
  },

  methods: {
    fileChange(event) {
      this.file = event.target.files[0];
    }
  }
};
</script>

<style scoped>
.fifty {
  height: 50vh;
}
</style>
```

## Caveats

- I haven't tested this with massive files.
- Not all PDFs may have the proper format to be displayed in the renderer.
- A web worker is inlined and handles the parsing of the file off of the main thread. I haven't encountered any issues but I imagine some could come up. Please open an issue if you do have a problem!

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