前端预览word、excel、ppt
看到很多人都是用微软 Office Web Viewer
https://view.officeapps.live.com/op/view.aspx?src=[文件链接]，
但是我们内网访问不到，不说废话了，上代码
1.预览word、excel（@vue-office/docx、@vue-office/excel）
//预览word
npm i @vue-office/docx
//预览excel
npm i @vue-office/excel
vue2低版本据说还要
npm install @vue/composition-api
//引入VueOfficeDocx组件
import VueOfficeDocx
//引入相关样式
import '@vue-office/docx/lib/index.css'
<vue-office-docx :src="你的url" style="height: 100vh;"/>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
<vue-office-excel :src="你的url" style="height: 100vh"/>
2.预览ppt（pptxjs）
官网https://pptx.js.org/index.html
在pubilc里新建一个文件夹xx,拉下代码放到里面https://github.com/meshesha/PPTXjs.git
将index.html的body部分换成以下内容
这个页面作为单独预览的页面，需要接受url中的params的参数作为预览文件地址
<body>
<div id="result"></div>
<script>
// 创建一个URL对象
const urlObj = new URL(window.location.href);
// 获取查询参数对象
const params = new URLSearchParams(urlObj.search);
// 获取pptUrl参数
const pptUrl = params.get('pptUrl');
$("#result").pptxToHtml({
pptxFileUrl: pptUrl,
slidesScale: "100%",
slideMode: false,
keyBoardShortCut: false
})
</script>
</body>
<div style="height: 100vh;" >
<iframe
id="iframe"
:src="`/viewPPTX/index.html?pptUrl=${你的url}`"
width="100%"
height="100%"
frameborder="0"
></iframe>
</div>
原文地址：https://blog.csdn.net/q249859693/article/details/143592393
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！