vue 在线预览各种文件

目录

一、下载依赖

二、 使用

 文档插件通过加载文档的URL或文件路径来获取文档内容，并在网页上进行渲染和展示。(doc、xls预览不了)

三、预览ppt

PPTX在线预览，使用jquery的插件《PPTXjs》，纯前端实现pptx转html进行展示

1.在PPTXjs官网下载插件，并在index.html内引入

2. html代码

3. js 代码

 4.如果是移动端项目，需要把div缩放，否则生成的html元素过大会溢出屏幕（PC端可忽略此步骤）

---

一、下载依赖

npm install @vue-office/docx @vue-office/excel @vue-office/pdf 

二、 使用

 文档插件通过加载文档的URL或文件路径来获取文档内容，并在网页上进行渲染和展示。(doc、xls预览不了)

<template>
  <div class="wrap">
    
      !-- Word文档 -->
    <vue-office-docx v-if="fileType === 'docx' || fileType === 'doc'" :src="filePath" 
      @rendered="rendered" @error="HandlError"></vue-office-docx>
    
      !-- PDf -->
    <vue-office-pdf v-if="fileType === 'pdf'" :src="filePath" @rendered="rendered"
      @error="HandlError"></vue-office-pdf>
    
      !-- excel -->
    <vue-office-excel v-if="fileType === 'xlsx' || fileType === 'xls'" :src="filePath" 
      @rendered="rendered" @error="HandlError"></vue-office-excel>
  </div>
</template>


<script setup>
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";

import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/excel/lib/index.css";

import VueOfficePdf from "@vue-office/pdf";



/** 渲染完成 **/
const rendered = (val) => {
  
};

</script>

三、预览ppt

PPTX在线预览，使用jquery的插件《PPTXjs》，纯前端实现pptx转html进行展示

1.在PPTXjs官网下载插件，并在index.html内引入

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

2. html代码

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

3. js 代码

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

 4.如果是移动端项目，需要把div缩放，否则生成的html元素过大会溢出屏幕（PC端可忽略此步骤）

// 由于生成的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);