vue3 在线预览word文件

一、使用mammoth插件

1. 安装插件
   pnpm install mammoth --save-dev
2. 使用

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".docx" />
    <div v-html="htmlContent"></div>
  </div>
</template>

<script setup>
import mammoth from "mammoth";
import { ref } from "vue";
const htmlContent = ref("");

const handleFileUpload = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const arrayBuffer = await file.arrayBuffer();  // 通过接口可以直接过去arrayBuffer文件流
    const result = await mammoth.convertToHtml({ arrayBuffer });
    htmlContent.value = result.value; // 获取转换后的 HTML 内容
  }
};
</script>

二、使用docx-preview插件

1. 安装插件
   pnpm install docx-preview --save-dev

2. 使用

   <template>
     <div>
    <input type="file" @change="handleFileUpload" accept=".docx" />
    <div ref="previewContainer" class="docx"></div>
     </div>
   </template>

   <script setup>
   import { renderAsync } from "docx-preview";
   import { ref } from "vue";
   const previewContainer = ref();
   const handleFileUpload = async (event) => {
     const file = event.target.files[0];
     const arrayBufferFile = await file.arrayBuffer();
     if (file) {
    console.log(file, "文件");
    console.log(arrayBufferFile, "文件流");
    previewContainer.value.innerHTML = ""; // 清空容器
    // 1. 渲染file上传文件
    // await renderAsync(file, previewContainer.value);
   
    // 2. 渲染arrayBufferFile文件流，通过接口获取。
    await renderAsync(
      arrayBufferFile, // Blob | ArrayBuffer | Uint8Array,
      previewContainer.value, // 用于呈现文档内容的html元素,
      null, // HTMLElement, // 如果将使用空正文容器，则显示文档样式、数字、字体的元素.
      {
        className: "docx", // (string = "docx") 默认类和文档样式类的类名前缀
        inWrapper: false, //boolean = true), //允许围绕文档内容呈现包装器
        hideWrapperOnPrint: false, //boolean = false), //禁用打印时的包装样式
        ignoreWidth: false, //boolean = false), //禁用页面的渲染宽度
        ignoreHeight: false, //boolean = false), //禁用页面的渲染高度
        ignoreFonts: false, //boolean = false), //禁用字体渲染
        breakPages: true, //boolean = true), //启用分页符上的分页符
        ignoreLastRenderedPageBreak: true, //boolean = true), //禁用上次呈现的分页符元素的分页术
        experimental: false, //boolean = false), //启用实验特征选项卡停止计算
        trimXmlDeclaration: true, //boolean = true), //如果在解析之前将从xml文档中删除true xml声明
        useBase64URL: false, //boolean = false), //如果真图像字体等将转换为基本64 url，否则将使用url创建对象url
        renderChanges: false, //允许对文档更改和删除进行实验性渲染
        renderHeaders: true, //启用标头呈现
        renderFooters: true, //启用脚部渲染
        renderFootnotes: true, //启用脚注渲染
        renderEndnotes: true, //启用尾注渲染
        renderComments: false, //启用实验性评论渲染
        renderAltChunks: true, //启用alt块html部分渲染
        debug: false, //boolean = false), //启用其他日志记录
      }
    ).then((res) => {
      console.log(res);
    });
     }
   };
   </script>

   <style scoped>
   .docx {
     background: #fff;
   }
   </style>