vue 项目在线浏览 docx (Word)、xlsx (Excel)、ppt、PDF 文件

对于docx、xlsx、pdf文件的在线浏览，有个比较好的插件vue-office

使用方法如下：

1、安装相应插件

//docx文档预览组件
npm install @vue-office/docx -S

//excel文档预览组件
npm install @vue-office/excel -S

//pdf文档预览组件
npm install @vue-office/pdf -S

2、使用

<template>
    <div>
        <vue-office-docx v-if="fileType=='docx'" :src="fileUrl" @rendered="renderedHandler" @error="errorHandler" />
        <vue-office-excel v-else-if="fileType=='xlsx'" :src="fileUrl" @rendered="renderedHandler" @error="errorHandler" />
        <vue-office-pdf v-else-if="fileType=='pdf'" :src="fileUrl" @rendered="renderedHandler" @error="errorHandler" />
    </div>
</template>

<script>
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/excel/lib/index.css'
import '@vue-office/docx/lib/index.css'

export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  data() {
    return {
        fileType: '',
        fileUrl:'',
    }
  }
}
</script>

而对于ppt文件的在线浏览，vue-office则没有相关的插件，网上找了几种方法，始终没有能找到很好的在vue上使用的插件，总结方法如下：

1、需要借助第三方库jszip和officegen来进行解析和生成展示页面

https://www.5axxw.com/questions/simple/qnxpwz

2、使用插件pspdfkit（需要收费）

https://pspdfkit.com/getting-started/web

3、使用微软官方的office文件在线查看器

https://juejin.cn/post/7025400224721928223

4、使用js插件pptxjs（最后只能临时使用这种方法）

在PPTXjs官网下载最新版插件，或者下载下面版本插件，并在index.html内引入

<link rel="stylesheet" href="/PPTXjs/css/pptxjs.css">
<link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css"><!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/PPTXjs/js/jszip.min.js"></script><!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="/PPTXjs/js/filereader.js"></script><!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="/PPTXjs/js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="/PPTXjs/js/pptxjs.js"></script>
<script type="text/javascript" src="/PPTXjs/js/divs2slides.js"></script> <!-- for slide show -->

html代码

<div id="pptx"></div>

js代码

$("#pptx").pptxToHtml({ 
    
    pptxFileUrl: "Sample_12.pptx", //pptx文件地址
    slidesScale: "100%", 
    slideMode: false, 
    keyBoardShortCut: false });

如果是移动端或者通过iframe引入导致生成的html元素过大会溢出屏幕，需要把div缩放

// 由于生成的html元素过大会溢出，这里用定时器检测元素生成完毕后进行缩放显示let timer = setInterval(() => { 
   
    const $slides = $(".slides");
    if ($slides.children().length) { 
   
      const slidesWidth = Math.max(...Array.from($slides.children()).map((s) => s.offsetWidth))
      const $wrapper = $('#pptx');
      const wrapperWidth = $wrapper[0].offsetWidth;
      $wrapper.css({ 
   
        transform: `scale(${ 
     wrapperWidth / slidesWidth})`,
        "transform-origin": "top left",
      })
      clearInterval(timer)
    }}, 100);