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 

  

//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为文件路径

3.pptx

使用pptx.js

首先需要下载pptx的文件

github: 

pptxhttps://github.com/meshesha/PPTXjs

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

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

使用：

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

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

调用XDOC的服务

三、移动端适配

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