前端预览word、excel、ppt

看到很多人都是用微软 Office Web Viewer
https://view.officeapps.live.com/op/view.aspx?src=[文件链接]

但是我们内网访问不到,不说废话了,上代码

1.预览word、excel(@vue-office/docx、@vue-office/excel)

js 复制代码
//预览word
npm i @vue-office/docx
js 复制代码
//预览excel
npm i @vue-office/excel

vue2低版本据说还要

npm install @vue/composition-api

js 复制代码
//引入VueOfficeDocx组件
import VueOfficeDocx
//引入相关样式
import '@vue-office/docx/lib/index.css'
<vue-office-docx :src="你的url" style="height: 100vh;"/>
js 复制代码
//引入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的参数作为预览文件地址

html 复制代码
<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>
js 复制代码
  <div style="height: 100vh;" >
      <iframe
        id="iframe"
        :src="`/viewPPTX/index.html?pptUrl=${你的url}`"
        width="100%"
        height="100%"
        frameborder="0"
      ></iframe>
    </div>
相关推荐
吃饺子不吃馅18 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多27 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar41 分钟前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel11 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端