xhEditor导入excel数据到信创系统

最新推荐文章于 2026-08-17 06:00:00 发布

原创最新推荐文章于 2026-08-17 06:00:00 发布 · 638 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

（扶了扶眼镜，敲着机械键盘开始码字）各位老板，作为山西前端界的一股泥石流，今天给大家表演个"如何在680元预算内实现文档自由"的绝活！

先甩个前端Vue3插件包（附赠React版兼容补丁）：

// XhEditorPlugin.js
export default {
  install(app) {
    const initXhEditor = (editor) => {
      // 添加文档导入按钮
      editor.addButton('docImport', {
        title: '文档导入',
        icon: '📎',
        onclick: () => {
          const input = document.createElement('input')
          input.type = 'file'
          input.accept = '.docx,.xlsx,.pptx,.pdf'
          input.onchange = async (e) => {
            const file = e.target.files[0]
            const formData = new FormData()
            formData.append('doc', file)
            
            // 调用后端解析接口
            const res = await axios.post('/api/doc-parse', formData)
            
            // 插入处理后的HTML
            editor.insertHTML(res.data.content)
            
            // 自动上传图片到服务器
            res.data.images.forEach(img => {
              const form = new FormData()
              form.append('image', img.blob)
              axios.post('/api/upload', form).then(r => {
                editor.insertHTML(``)
              })
            })
          }
          input.click()
        }
      })

      // 监听Word粘贴事件
      editor.on('paste', (e) => {
        const items = (e.clipboardData || e.originalEvent.clipboardData).items
        for (let item of items) {
          if (item.type.startsWith('image/')) {
            const blob = item.getAsFile()
            const form = new FormData()
            form.append('image', blob)
            axios.post('/api/upload', form).then(r => {
              editor.insertHTML(``)
            })
          }
        }
      })
    }

    app.config.globalProperties.$xhEditor = { init: initXhEditor }
  }
}

后端C#版（ASP.NET Core版）：

[ApiController]
[Route("api/doc-parse")]
public class DocParseController : ControllerBase
{
    [HttpPost]
    public async Task ParseDocument(IFormFile doc)
    {
        // 文档解析核心代码（开源库组合拳）
        var result = new DocumentParser().Parse(doc.OpenReadStream(), doc.FileName);
        
        // 处理公式转换
        result.Content = Regex.Replace(result.Content, @"(\$\$.+?\$\$)", m => {
            var latex = m.Value.Replace("$$", "");
            return $"{LatexToMathML(latex)}";
        });

        // 返回处理后的内容
        return Ok(new {
            content = result.Content,
            images = result.Images.Select(img => new {
                name = img.FileName,
                url = $"/uploads/{Guid.NewGuid()}{Path.GetExtension(img.FileName)}"
            })
        });
    }

    private string LatexToMathML(string latex)
    {
        // 调用开源转换库（推荐使用MathJax.NET）
        using var converter = new MathJaxConverter();
        return converter.Convert(latex);
    }
}

（突然神秘兮兮）关于那个emz/wmz格式的公式图片，这里有个祖传偏方：

用Apache POI提取PPT中的公式
通过ImageMagick转成PNG
用OpenCV做锐化处理
最后用Tesseract OCR识别公式内容

（突然拍桌）但最骚的是微信公众号内容导入！直接祭出这个神器：

// 微信公众号内容抓取
function parseWechatContent(html) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(html, 'text/html')
  
  // 提取正文
  const content = doc.querySelector('#js_content').innerHTML
  
  // 处理微信特色样式
  return content
    .replace(/ `]*)>/g, '')
    .replace(/<\/section>/g, '')
}