vue_pdf,word,excel,pptx等文件预览

本文主要是介绍vue_pdf,word,excel,pptx等文件预览，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目背景：vue3+elementPlus+vite

1.pdf

1.1 iframe预览

+ '#toolbar=0' 拼接到src后，可隐藏iframe顶部的工具栏

<template><div class="viewPDF.vue"><uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile><iframe :src="fileUrl+ '#toolbar=0'" frameborder="0"></iframe></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import PDFObject from 'pdfobject'
import uploadFile from '@/components/uploadFile.vue'const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {let file = URL.createObjectURL(val.raw)fileUrl.value = file
}</script><style scoped lang="less">
.pdfobject-container {height: 680px;
}
</style>

1.2 pdfobject 插件

安装及管网
https://pdfobject.com/api/
npm i pdfobject
代码实现及配置

<template><div class="viewPDF.vue"><uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile><div id="mypdf"></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import PDFObject from 'pdfobject'
import uploadFile from '@/components/uploadFile.vue'const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {let file = URL.createObjectURL(val.raw)fileUrl.value = filevar options = {pdfOpenParams: {scrollbars: "0",toolbar: "0",statusbar: "0",zoom: "100",view: "100%",fallbackLink: true,}, //禁用工具栏代码等一些配置};PDFObject.embed(fileUrl.value, '#mypdf', options)
}</script>

1.3 vue-office/pdf插件

安装
npm install @vue-office/pdf vue-demi
使用

<template><div class="viewPDF.vue"><uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile><vue-office-pdf :src="fileUrl"  style="height: 600px" /></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import VueOfficePdf from '@vue-office/pdf'
import uploadFile from '@/components/uploadFile.vue'const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {let file = URL.createObjectURL(val.raw)fileUrl.value = file