前端预览含表格文件

需求内容是后台生成包含表格文件后，前端要支持下载与在线预览

首页后台返回的是文件下载链接，直接使用a标签会直接跳转下载

1、使用xhr数据请求方式

2、借助mammoth获取文件内容

3、展示使用div标签即可<div v-html="vhtml"></div>

var vm = this;
var xhr = new XMLHttpRequest();
xhr.open("get", fileUr, true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
   if (xhr.status == 200) {
       mammoth
         .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
         .then(function (resultObject) {
            vm.$nextTick(() => {//获取文章内容
              console.log(resultObject.value)//展示用的html
              vm.wordVisible = true;
              vm.vHtml = resultObject.value
            });
         });
   }
};
xhr.send();

处理其中的表格数据，添加样式，与空白列头的合并

let html = resultObject.value;
let newHtmlArr = [];
let changeIndex = -1;
html.split("<tr>").forEach((line, index) => {
  // 表头加边框与背景色
  line = line.replaceAll(
    "<table>",
    "<table style='margin:auto;width:80%;'>"
  );
  line = line.replaceAll(
    "<th>",
    "<th style='border:1px solid #333;background:#aaa;'>"
  );

  if (line.indexOf("<strong>安全层面</strong>") != -1) {
    // 非正规表头判断，添加边框与背景色
    if (
      line.indexOf('rowspan="') != -1 &&
      line.indexOf("rowspan=") <
        line.indexOf("<strong>序号</strong>")
    ) {
      //判断有多行表头
      let num = line.split('rowspan="')[1].split('"')[0];
      changeIndex = index + (num - 1);
    }
    if (line.indexOf("<td></td>") != -1) {
      //有空白列
      let lineArr = line.split("<td>"); //按列分割
      let tmpArr = []; //保存修改后的内容
      lineArr.forEach((element, index) => {
        //遍历每个列
        if (element.length && index > 0) {
          //判断有元素
          if (element.startsWith("</td>")) {
            //前部是结束标签则是空元素
            element = element.replace("</td>", "");
            let changeItem = tmpArr[tmpArr.length - 1]; //找到空列前边的列
            if (changeItem.indexOf('colspan="') != -1) {
              //有合并列
              let num = changeItem
                .split('colspan="')[1]
                .split('"')[0];
              num = parseInt(num) + 1; //多加一个需要合并的列
              changeItem =
                changeItem.split('colspan="')[0] +
                'colspan="' +
                num +
                '"' +
                changeItem
                  .split('colspan="')[1]
                  .split('"')[1];
              tmpArr[tmpArr.length - 1] = changeItem;
            } else {
              changeItem = changeItem.replace(
                "<td>",
                '<td colspan="2">'
              );
              tmpArr[tmpArr.length - 1] = changeItem;
            }
          } else {
            element = "<td>" + element;
          }
        }
        if (element.length) {
          //有元素，加入数组
          tmpArr.push(element);
        }
      });
      line = tmpArr.join("");
    }
    line = line.replaceAll(
      "<td",
      "<td style='border:1px solid #333;background:#96D466;'"
    );
  } else if (changeIndex >= index) {
    // 有多行表头
    line = line.replaceAll(
      "<td",
      "<td style='border:1px solid #333;background:#aaa;'"
    );
    if (changeIndex == index) {
      //清空表头记录
      changeIndex = -1;
    }
  } else if (
    line.indexOf("<strong>安全控制点</strong>") != -1
  ) {
    line = line.replaceAll(
      "<td",
      "<td style='border:1px solid #333;background:#889DAD;'"
    );
  } else if (
    line.indexOf("<strong>测评人员签字</strong>") != -1
  ) {
    line = line.replaceAll("<td></td>", "嘟嘟");
    line = line.replaceAll(
      "<td",
      "<td style='border:1px solid #333;background:#FA6B1A;'"
    );
    line = line.replaceAll(
      "嘟嘟",
      "<td style='border:1px solid #333;'></td>"
    );
  } else {
    // 表格项添加边框
    line = line.replaceAll(
      "<td",
      "<td style='border:1px solid #333;'"
    );
  }
  newHtmlArr.push(line);
});

html = newHtmlArr.join("<tr>");

vm.wordVisible = true;
vm.vHtml = html;