项目中导入docx文件实现预览效果

首先需要用到docx-preview组件

在页面中全部引入该组件

import * as docx from "docx-preview";

import * as docx from "docx-preview";
import { onMounted } from "vue";
const docxOptions = Object.assign(docx.defaultOptions, {
  debug: true,
  experimental: true,
});

onMounted(() => {
  let dome: HTMLElement = document.getElementById("loadButton");
  console.log(dome);

  dome.addEventListener("click", loadDocx);
});

function loadDocx() {
  var file: any = document.getElementById("files").files[0];
  console.log(file);

  if (!file) return;

  var container = document.getElementById("document-container");

  docx.renderAsync(file, container, null, docxOptions).then(function (x) {
    console.log(x);
  });
}

全部代码

<template>
  <div class="hstack p-2 gap-2 bg-light position-sticky top-0" style="z-index: 1;">
    <input id="files" type="file" class="form-control" style="width: 50ch;" accept=".docx" />
    <button id="loadButton" class="btn btn-primary px-4">Load</button>
    <!-- <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="optionsMenuButton"
                data-bs-toggle="dropdown" aria-expanded="false">
                Options
            </button>
            <ul id="optionsMenu" class="dropdown-menu" aria-labelledby="optionsMenuButton">
            </ul>
    </div>-->
  </div>

  <div class="showExcal">
    <div id="document-container"></div>
  </div>
</template>


<script setup lang="ts">
import * as docx from "docx-preview";
import { onMounted } from "vue";
const docxOptions = Object.assign(docx.defaultOptions, {
  debug: true,
  experimental: true,
});

onMounted(() => {
  let dome: HTMLElement = document.getElementById("loadButton");
  console.log(dome);

  dome.addEventListener("click", loadDocx);
});

function loadDocx() {
  var file: any = document.getElementById("files").files[0];
  console.log(file);

  if (!file) return;

  var container = document.getElementById("document-container");

  docx.renderAsync(file, container, null, docxOptions).then(function (x) {
    console.log(x);
  });
}
</script>


<style lang="less" >
.showExcal {
  width: 50vw;
  height: 50vh;
  overflow: auto;
}
.docx-wrapper {
  background-color: white !important;
  border: 1px solid gray !important;
  overflow-y: scroll;
  margin: 100px auto;
}
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: red !important;
}
</style>```