在Vue 3中实现PDF预览，可以使用几种方法：
- 使用
vue3-pdf库：
// 安装vue3-pdf
npm install vue3-pdf
// 在组件中使用
<template>
<div>
<pdf
:src="pdfSrc"
></pdf>
</div>
</template>
<script>
import pdf from 'vue3-pdf'
export default {
components: {
pdf
},
data() {
return {
pdfSrc: 'path/to/your/pdf/file.pdf'
}
}
}
</script>- 使用
iframe流显示：
<template>
<div>
<iframe :src="pdfUrl"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'path/to/your/pdf/file.pdf'
}
}
}
</script>- 使用
vue-office/pdf库预览PDF和Office文件：
// 安装vue-office/pdf
npm install @vue-office/pdf
// 在组件中使用
<template>
<div>
<PdfViewer :src="pdfSrc" />
</div>
</template>
<script>
import { PdfViewer } from '@vue-office/pdf'
export default {
components: {
PdfViewer
},
data() {
return {
pdfSrc: 'path/to/your/pdf/file.pdf'
}
}
}
</script>以上方法可以实现PDF文件的预览，但是要注意的是，对于vue3-pdf和vue-office/pdf，它们都依赖于PDF.js库，因此在使用时需要确保该库已经被加载。而对于iframe方法，它是通过在iframe中嵌入PDF文件来实现预览的，这种方法简单但可能受到跨域限制。