vue预览pdf文件的几种方法_vue pdf预览(2)

## 方法三：


### 展示效果：


效果一：分页  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/681ad74051364147a17e45ddf4bda709.png)  
 效果二：不分页  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/70fa2ebb74304908b09bd288f90b28df.png)


### 需要包依赖：

"vue-pdf-embed": "^1.1.6",
"vue3-pdfjs": "^0.1.6",

### 代码：


### 自己调参数，选择符合自己的

const props = defineProps({
pdfUrl: {
type: String,
required: true
}
})

// const emit = defineEmits<{ (event: ‘getPdfUrl’, name: string): void }>()
// const getPdfUrl = ()=>{
// emit(‘getPdfUrl’, props.pdfUrl)
// }

const state = reactive({
source: http://192.168.11.50:8102/database/bio/load\_file/BYimage/ncov.pd