前端预览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;" ><iframeid="iframe":src="`/viewPPTX/index.html?pptUrl=${你的url}`"width="100%"height="100%"frameborder="0"></iframe></div>