Vue3 + vite online preview docx, pdf, pptx (internal and external network) and realize mobile terminal adaptation

1. Intranet

1.docx

Use docx-preview

  install plugin

npm i docx-preview -S

 Introduce dependencies

// 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

Use vue3-pdf-app

  install plugin

npm install vue3-pdf-app

  Introduce dependencies

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

  very easy to use

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

3.pptx

Use pptx.js

First you need to download the pptx file

github: 

pptxhttps://github.com/meshesha/PPTXjs

Official website address: PPTXjs https://pptx.js.org/

After the download is complete, put it in the lib folder under the public, and then introduce it in 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 -->

use:

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

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

2. External network (the file address must be in the public network environment)

Call the service of 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>

3. Mobile terminal adaptation

vue3-pdf-app will automatically adapt, mainly the adaptation of docx and pptx

docx : Zoom the page after the document is loaded

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: same problem as 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);