纯前端读取world内容,文档预览，转成html,纯文字，Markdown，excel等这次会涉及的例子会将world的

纯前端读取world内容,文档预览，转成html,纯文字，Markdown等。慢慢看，你终将有所收获

这次会涉及的例子会将world的数据转成excel表，可以先学习一下这篇，方便后续理解

ps:如果你遇到导出的格式有问题，可以检查你的world的括号是英文括号，还是中文括号。

1.安装对应的库

预览文档--docx-preview

npm install docx-preview

docx-preview的npm地址

提取文档内容--mammoth

npm install mammoth

mammoth-npm地址

Mammoth是一个专注于转换 .docx 文档的工具库，它能将Microsoft Word、Google Docs 和 LibreOffice 创建的文档转换成HTML，Mammoth会利用文档的XML语义信息，忽略其他细节，从而生成简单明了的 HTML。比如Mammoth会将任何带有标题 1 样式的段落转换为 h1 元素，但不会把标题的样式（字体、文字大小、颜色等）全部复制过去。

Mammoth支持以下功能：

标题
列表
标题
列表
可定制的 docx 样式到 HTML 的映射。例如，您可以通过提供适当的样式映射，将 WarningHeading 转换为 h1.warning
表格：表格格式（如边框）会被忽略
脚注和尾注
图片
粗体、斜体、下划线、删除线、上标和下标。
链接
换行
文本框：文本框的内容被视为一个单独的段落，出现在包含文本框的段落之后。
注释

2. 获取world文本的段落内容

这里我需要获取的内容是如下格式，将world的内容，全部读取后放到excel中

我的world文本如下

1.《信息系统安全等级保护实施指南》将(     )作为实施等级保护的第一项重要内容。

A.安全定级

B.安全评估

C.安全规划

D.安全实施

正确答案：A

2.MSC业务全阻超过(     )分钟即属重大故障。

A.10

B.15

C.30

D.60

正确答案：D

我最终要实现的功能，转成如下excel

实现预览功能

renderAsync接收四个参数

1.document: 数据格式可以为Blob | ArrayBuffer | Uint8Array,

2.bodyContainer: 渲染的区域

3.styleContainer: 通常用于指定一个HTML元素，该元素将用于包含和管理渲染文档所需的样式信息，包括字体、颜色、布局等。

4.options:{} 具体参数看文档

完整可实现代码如下：

<template>
  <div class="home">
    <div class="container" id="app">
      <div class="operation">
        <button class="btn" @click="uploadFile">上传word文件</button>
      </div>
       <br>
      <!-- 纯文字内容 -->
      <div v-if="wordData">{{wordData}}</div>
      <br>
      <!-- 文档预览容器 -->
      <div id="preview"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import mammoth from "mammoth";
let docx = import.meta.glob("docx-preview");
//一般用这种形式就行了
// let docx = require("docx-preview");
import { renderAsync } from "docx-preview";
console.log("docx", docx);
let wordData = ref("");
const uploadFile = (mark) => {
  let inputEle = document.createElement("input");
  inputEle.type = "file";
  inputEle.accept =
    ".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document";
  inputEle.click();
  inputEle.addEventListener("input", (event) => {
    onWord(event);
  });
};

const onWord = (event) => {
  // FileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
  let reader = new FileReader();
  let file = event.target.files[0];
  let options = { inWrapper: false, ignoreWidth: true, ignoreHeight: true };
  renderAsync(file, document.getElementById("preview"), null, options);
  let fileName = file.name;
  if (file) {
    reader.onload = function (e) {
      const data = e.target.result;
      //extractRawText--转文字；
      mammoth
        .extractRawText({ arrayBuffer: data })
        .then(function (displayResult) {
          wordData.value = displayResult.value;
          console.log("转文字", displayResult.value);
        })
        .done();
      //convertToHtml--转HTML；
      mammoth
        .convertToHtml({ arrayBuffer: data })
        .then(function (displayResult) {
          console.log("转HTML", displayResult);
          let parser = new DOMParser();
          let doc = parser.parseFromString(displayResult.value, "text/html");
          // 获取所有的<p>标签
          let paragraphs = doc.body.getElementsByTagName("p");

          for (let i = 0; i < paragraphs.length; i++) {
          //输出p标签中的文本内容
           console.log(paragraphs[i].textContent);
          }
            // 处理段落的数据，输出到excel中
          //handleExcelData(paragraphs);
          
        })
        .done();
      // convertToMarkdown--转Markdown 文档
      mammoth
        .convertToMarkdown({ arrayBuffer: data })
        .then(function (displayResult) {
          console.log("转Markdown 文档", displayResult);
        })
        .done();
    };
    reader.readAsArrayBuffer(file);
  }
};

</script>
<style scoped>
.container {
  padding: 0 50px;
}

.operation {
  padding: 20px;
}

.btn {
  min-width: 50px;
  font-size: 20px;
  color: #fff;
  background: #118ee9;
  margin: 0 20px 0 0;
  padding: 8px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
}

.item {
  width: 350px;
  box-sizing: border-box;
  padding: 4px 14px 4px 14px;
  color: #000;
  font-size: 12px;
  background: #fff;
}
</style>

3. 将world的内容转化对应的格式输出到excel

1.安装js-xlsx

npm install --save xlsx

在untils文件夹下，新建ecxel.js

const XLSX = require("xlsx");  //使用import有的属性无法找到
export function exportExcel(filename, data) {
    let exc = XLSX.utils.book_new(); // 初始化一个excel文件
    let exc_data = XLSX.utils.aoa_to_sheet(data);   // 传入数据 , 到excel
    // 将文档插入文件并定义名称
    XLSX.utils.book_append_sheet(exc, exc_data, filename);
    // 执行下载
    XLSX.writeFile(exc, filename + '.xlsx');
}

处理excel数据，这里的处理根据各自的需求处理，因人而异。

处理excel的数据
function handleExcelData(paragraphs) {
  let list = [];
  // console.log('paragraphs', paragraphs);
  let obj = {
    title: "",
    optionsArr: [],
    anser: "",
  };
  let tagIndex = 1;
  // 遍历并打印每个<p>标签的内容
  for (let i = 0; i < paragraphs.length; i++) {
    let str = paragraphs[i].textContent;
    // 判断是否含有括号
    // let flag = /\(|\)/.test(str);
    let flag = /\(\s*\)/.test(str);
    if (flag) {
      obj.title = paragraphs[i].textContent;
    }
    // 判断是否是选项
    let op = /^[A-Z]/.test(str);
    if (op) {
      obj.optionsArr.push(str);
    }
    if (str.includes("答案")) {
      // 判断是答案，读取对应的数据
      obj.anser = str.replace(/[^a-zA-Z]/g, "");
      tagIndex = 2;
    }
    // 处理完一题后，将原来存储的数据置空
    if (tagIndex === 2) {
      list.push(obj);
      obj = {
        title: "",
        optionsArr: [],
        anser: "",
      };
      tagIndex = 1;
    }
  }
  // 这里最终处理的数据
  // console.log("list", list);
  handleExport(list);
}
// exportExcel准备导出excel
function handleExport(list) {
  let titleArr = [
    "目录",
    "题目类型",
    "大题题干",
    "小题题型",
    "小题题干",
    "正确答案",
    "答案解析",
    "难易度",
    "知识点",
    "标签",
    "选项数",
    "选项A",
    "选项B",
    "选项C",
    "选项D",
    "选项E",
    "选项F",
    "选项G",
    "选项H",
  ];
  console.log("list", list);
  let listArr = [];
  listArr.push(titleArr);
  let flag = false;
  list.forEach((el) => {
    let arr = new Array(titleArr.length); // 创建一个长度为5的数组
    if (!flag) {
      arr[0] = "/计算机程序设计";
      flag = true;
    } else {
      arr[0] = "";
    }
    arr[1] = "单选题";
    // 题干
    arr[2] = el.title;
    // 小题题型
    arr[3] = "";
    // 小题题干
    arr[4] = "";
    // 正确答案
    arr[5] = el.anser;
    arr[6] = ""; // 答案解析
    arr[7] = ""; // 难易度
    arr[8] = ""; // 知识点
    arr[9] = ""; // "标签"
    arr[10] = el.optionsArr.length; // "选项数",
    el.optionsArr.forEach((item, index) => {
      arr[10 + index + 1] = item;
    });
    listArr.push(arr);
  });
  console.log("listArr", listArr);
  //导出excel
  exportExcel("单选题导出", listArr);
}

文章参考