前端预览含表格文件

前端预览含表格文件_第1张图片前端预览含表格文件_第2张图片

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

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

1、使用xhr数据请求方式

2、借助mammoth获取文件内容

3、展示使用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("").forEach((line, index) => {
  // 表头加边框与背景色
  line = line.replaceAll(
    "",
    "
" ); line = line.replaceAll( "") != -1) { //有空白列 let lineArr = line.split("")) { //前部是结束标签则是空元素 element = element.replace("", ""); 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( "", "嘟嘟"); line = line.replaceAll( "" ); } else { // 表格项添加边框 line = line.replaceAll( ""); vm.wordVisible = true; vm.vHtml = html;

 

你可能感兴趣的:(前端)

", "" ); if (line.indexOf("安全层面") != -1) { // 非正规表头判断,添加边框与背景色 if ( line.indexOf('rowspan="') != -1 && line.indexOf("rowspan=") < line.indexOf("序号") ) { //判断有多行表头 let num = line.split('rowspan="')[1].split('"')[0]; changeIndex = index + (num - 1); } if (line.indexOf(""); //按列分割 let tmpArr = []; //保存修改后的内容 lineArr.forEach((element, index) => { //遍历每个列 if (element.length && index > 0) { //判断有元素 if (element.startsWith("", '' ); tmpArr[tmpArr.length - 1] = changeItem; } } else { element = "" + element; } } if (element.length) { //有元素,加入数组 tmpArr.push(element); } }); line = tmpArr.join(""); } line = line.replaceAll( "= index) { // 有多行表头 line = line.replaceAll( "安全控制点") != -1 ) { line = line.replaceAll( "测评人员签字") != -1 ) { line = line.replaceAll("