In daily work, there is often a need to preview PDF files online. Below, we’ll introduce how to use `vue-pdf` to achieve online preview of PDF files.
1. Install `vue-pdf` using npm:
```bash
npm install vue-pdf
```
2. Display PDF Files using `vue-pdf`:
```vue
<template>
<div>
<pdf :src=”url”></pdf>
</div>
</template>
<script>
import pdf from ‘vue-pdf’
export default {
components:{
},
data(){
return {
url: “http://example.com/example.pdf"
}
}
}
</script>
```
3. At this point, the page will display the provided PDF file, but only the first page of the PDF file will be shown.
4. Display PDF Files Page by Page:
```vue
<template>
<div>
<button @click=”prevPage”>Previous Page</button>
<button @click=”nextPage”>Next Page</button>
<div>{{ pageNumber }} / {{ totalNumber }}</div>
:page=”pageNum”
:src=”url”
@progress=”loadedRatio = $event”
@num-pages=”totalNumber = $event”
></pdf>
</div>
</template>
<script>
import pdf from ‘vue-pdf’
export default {
components: {
pdf,
},
data() {
return {
url: “http://example.com/example.pdf",
pageNum: 1,
totalNumber: 1,
loadedRatio: 0
}
},
mounted() {
this.getNumPages()
},
methods: {
getNumPages() {
let loadingTask = pdf.createLoadingTask(this.url)
loadingTask.promise.then(pdf => {
this.totalNumber = pdf.numPages
}).catch(err => {
console.error(‘PDF loading failed’, err);
})
},
// Previous Page
prevPage() {
let page = this.pageNumber
page = page > 1 ? page — 1 : this.totalNumber
this.pageNumber = page
},
// Next Page
nextPage() {
let page = this.pageNumber
page = page < this.totalNumber ? page + 1 : 1
this.pageNumber = page
}
}
}
</script>
```
Using `vue-pdf` fulfills the requirement of previewing PDF files, but it can be cumbersome to use with many configurations. Next, we’ll introduce an alternative approach using the ComPDFKit PDF SDK to achieve online PDF preview.
## Using ComPDFKit PDF SDK for Online PDF Preview
### Step 1: Adding ComPDFKit PDF SDK Package
1. Add the **@compdfkit** folder to the root directory of your project or to the **lib** directory within the **assets** directory. This will serve as the entry file for ComPDFKit PDF SDK for Web and import it into your project.
2. Add the **webviewer** folder, which contains the required static resource files to run ComPDFKit PDF SDK for Web, to your project’s static resource folder. You can obtain the address and trial version from: https://www.compdf.com/webviewer/demo
### Step 2: Displaying PDF Documents
1. Import the **webviewer.js** file from the **@compdfkit** folder into your project.
2. Call `ComPDFKitViewer.init()` to initialize the ComPDFKit Web Viewer in your project.
3. Pass the PDF address and license key to the `init` function:
```javascript
// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from “/@compdfkit/webviewer”;
const viewer = document.getElementById(‘webviewer’);
ComPDFKitViewer.init({
pdfUrl: ‘Your PDF Url’,
license: ‘Input your license here’
}, viewer)
.then((core) => {
const docViewer = core.docViewer;
docViewer.addEvent(‘documentloaded’, () => {
console.log(‘ComPDFKit Web Viewer loaded’);
})
})
```
4. After running the project, you will be able to see the PDF file you want to display.
