1.0.1 • Published 4 years ago
vue-pdf-renderer v1.0.1
Vue Pdf Renderer
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
You'll then need to install the package via npm
npm install vue-pdf-renderer
Import the component wherever you need it
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.
<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!