【vue预览PDF文件的几种方法】

vue展示PDF文件的几种方法

使用Vue插件

你需要安装vue-pdf-embed:

npm install vue-pdf-embed

<template><div class="pdf-container"><VuePdfEmbed :src="pdfUrl" /></div>
</template><script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed';
import { ref } from 'vue';const pdfUrl = ref('https://xxxx.pdf');
</script><style scoped>
.pdf-container {width: 100%;height: 800px; /* 根据需要调整高度 */
}
</style>```#### 使用<embed>标签```javascript
<template><div class="pdf-container"><embed :src="pdfUrl" type="application/pdf" width="100%" height="800px" /></div>
</template><script setup lang="ts">
import { ref } from 'vue';const pdfUrl = ref('https://xxxx.pdf');
</script><style scoped>
.pdf-container {width: 100%;height: 800px;
}
</style>

使用iframe

<template><div class="pdf-container"><iframe :src="pdfUrl" width="100%" height="800px"></iframe></div>
</template><script setup lang="ts">
import { ref } from 'vue';const pdfUrl = ref('https://xxxx.pdf');
</script><style scoped>
.pdf-container {width: 100%;height: 800px;
}
</style>

实现效果：