vue3 + vite 在线预览docx, pdf, pptx（内外网）并实现移动端适配

一、内网

1.docx

使用docx-preview

  安装插件

npm i docx-preview -S

 引入依赖

// docx
import { renderAsync } from "docx-preview";
let docx = import.meta.glob("docx-preview"); // vite不支持require 

  

<div
 ref="docxDiv"
 class="docxDiv"
 v-if="['docx'].includes(detailItem.fileType)"
 v-loading="loading"
></div>

//js部分 detailItem.value为当前文件的数据对象
const previewfile = () => {
  loading.value = true;
  fetch(detailItem.value.filePath)
    .then((response) => {
      let docData = response.blob();
      let docxDiv= document.getElementsByClassName("docxDiv");
      renderAsync(docData, docxDiv[0], null, {
        inWrapper: true, // 启用围绕文档内容渲染包装器
        ignoreWidth: false, // 禁止页面渲染宽度
        ignoreHeight: false, // 禁止页面渲染高度
        ignoreFonts: false, // 禁止字体渲染
        breakPages: true, // 在分页符上启用分页
        ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
        experimental: false, //启用实验性功能（制表符停止计算）
        trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
        debug: false,
      }).then((res) => {
        loading.value = false;
      });
    })
    .catch((error) => {
      console.log(error);
    });
};

2.pdf

使用vue3-pdf-app

  安装插件

npm install vue3-pdf-app

  引入依赖

// pdf
import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css";

  使用方法非常简单

// detailItem.filePath为文件路径
<vue-pdf-app style="height: 100vh; width: 100vw" :pdf="detailItem.filePath"></vue-pdf-app>

3.pptx

使用pptx.js

首先需要下载pptx的文件

github: 

pptxhttps://github.com/meshesha/PPTXjs

官网地址：PPTXjshttps://pptx.js.org/

下载完成后放到public下的lib文件夹中, 然后在index.html中引入

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

使用：

<div id="pptx" v-if="detailItem.fileType === 'pptx'"></div>

// js部分 jquery已在index.html中引入 无需另外安装
const handlePPtx = () => {
  $("#pptx").pptxToHtml({ 
      pptxFileUrl: detailItem.value.filePath, //pptx文件地址
      slidesScale: "100%", 
  });
}

二、外网（文件地址须在公网环境下）

调用XDOC的服务

<iframe :src="'https://view.xdocin.com/view?src=https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//Bom/bom/2022/1/19/2022011911370824626513.pdf'"></iframe>

三、移动端适配

vue3-pdf-app会自动适配 ， 主要是docx和pptx的适配问题

docx : 在文档加载完成后 进行页面的缩放

renderAsync(docData, childRef[0], null, {
        inWrapper: true, // 启用围绕文档内容渲染包装器
        ignoreWidth: false, // 禁止页面渲染宽度
        ignoreHeight: false, // 禁止页面渲染高度
        ignoreFonts: false, // 禁止字体渲染
        breakPages: true, // 在分页符上启用分页
        ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
        experimental: false, //启用实验性功能（制表符停止计算）
        trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
        debug: false,
      }).then((res) => {
        loading.value = false;
        console.log("res---->", res);
        let timer = setInterval(() => {
          const $slides = $(".docx-wrapper");
          if ($slides.children().length) {
            const slidesWidth = Math.max(
              ...Array.from($slides.children()).map((s) => s.offsetWidth)
            );
            const $wrapper = $("#docRef");
            const wrapperWidth = window.innerWidth;
            const wrapperHeight = window.innerHeight;
            $wrapper.css({
              transform: `scale(${wrapperWidth / slidesWidth})`,
              "transform-origin": "top left",
              height: wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px",
            });
            clearInterval(timer);
          }
        }, 100);

pptx: 跟doc同样的问题

await $("#pptx").pptxToHtml({
    pptxFileUrl: "/api" + detailItem.value.filePath, //pptx文件地址
    slidesScale: "100%",
    slideMode: false,
    keyBoardShortCut: false,
  });
  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 = window.innerWidth;
      const wrapperHeight = window.innerHeight;
      $wrapper.css({
        transform: `scale(${wrapperWidth / slidesWidth})`,
        "transform-origin": "top left",
        height: wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px",
      });
      clearInterval(timer);
    }
  }, 100);