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

vue tytrock ⋅ 于 2024-01-12 10:38:17 ⋅ 328 阅读

对于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);




本帖已被设为精华帖!
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter