Vue3 + vite オンライン プレビュー docx、pdf、pptx (内部および外部ネットワーク) およびモバイル端末への適応を実現

1. イントラネット

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ファイルをダウンロードする必要があります

ギットハブ: 

pptx https://github.com/meshesha/PPTXjs

公式サイトアドレス：PPTXjs https://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%", 
  });
}

2. 外部ネットワーク (ファイルアドレスはパブリックネットワーク環境にある必要があります)

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. モバイル端末への適応

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: ドキュメントと同じ問題

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