本文將介紹如何在Vue項目中集成pdfjs，并顯示PDF文檔。
首先，在Vue項目中安裝pdfjs-dist依賴。
npm install pdfjs-dist --save
接下來，創建一個名為PdfViewer的組件，并使用
標簽來顯示PDF文檔。
<template>
<div>
<div ref="pdfViewer"></div>
</div>
</template>
<script>
import pdfjs from 'pdfjs-dist'
export default {
data () {
return {
pdfUrl: 'example.pdf'
}
},
mounted () {
pdfjs.getDocument(this.pdfUrl).then((pdf) => {
pdf.getPage(1).then((page) => {
const canvas = this.$refs.pdfViewer
const context = canvas.getContext('2d')
const viewport = page.getViewport(1.0)
canvas.height = viewport.height
canvas.width = viewport.width
page.render({
canvasContext: context,
viewport: viewport
})
})
})
}
}
</script>在上面的代碼中，我們使用pdfjs獲取PDF文檔并在頁面中顯示第一頁。我們使用Canvas來實現這個功能。首先，我們獲取Canvas的上下文，然后根據PDF頁面的大小設置Canvas的大小。使用page.render()方法將頁面呈現在Canvas上。
在PdfViewer組件中添加樣式。
<style scoped>
div {
border: 1px solid #999;
}
</style>以上就是如何在Vue項目中集成pdfjs，并在頁面中顯示PDF文檔的完整代碼。希望本文能幫助您快速集成pdfjs。