xhEditor pdf导入支持书签和目录

最新推荐文章于 2026-08-19 12:07:26 发布

原创最新推荐文章于 2026-08-19 12:07:26 发布 · 890 阅读

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

（搓手手）哎呀妈呀，老铁们！咱山西程序员接单就是这么朴实无华且枯燥——客户甩过来680块预算要让Word一键粘贴还能识别Latex公式，这需求猛得跟老陈醋似的酸爽！不过别慌，看完我这方案，保证让你在QQ群里边收红包边把代码撸得飞起！（文末有加群暗号）

一、需求翻译（客户说人话版）

客户大爷其实就想：

Ctrl+C/V大法：从Word复制到编辑器别乱码，图片自动传阿里云OSS
文档全家桶导入：Word/PPT里那些花里胡哨的公式、形状组，导进来还能看清不是马赛克
公众号薅羊毛：从微信复制文章能自动抓图上传
老年友好模式：按钮越大越好，流程越短越好

二、技术方案（680块豪华套餐）

前端：xhEditor魔改计划

// 在xhEditor初始化时加个金闪闪的按钮
$('#editor').xheditor({
    tools: 'Bold,Italic,|,WordPaste,ImportDoc', // 新增俩按钮
    onWordPaste: function(){
        // 弹个框让用户粘贴Word内容
        showPasteDialog(html => {
            // 把图片blob转成文件上传OSS
            uploadImages(html).then(cleanHtml => {
                this.pasteHTML(cleanHtml); // 怼进编辑器
            });
        });
    },
    onImportDoc: function(){
        // 假装很专业地弹出文件选择器
        $('#fileInput').click().change(e => {
            const file = e.target.files[0];
            // 后端大哥快把文档转成HTML！
            convertDocToHtml(file).then(html => {
                this.pasteHTML(html);
            });
        });
    }
});

// 公众号内容抓取（暴力版）
function stealWeChatContent(html) {
    // 正则匹配所有图片地址
    const imgUrls = html.match(/]+src="([^">]+)"/g);
    imgUrls.forEach(url => {
        // 让后端偷偷下载并替换成OSS地址
        fetch('/api/steal-image?url=' + encodeURIComponent(url))
            .then(res => res.json())
            .then(data => {
                html = html.replace(url, data.newUrl);
            });
    });
    return html;
}

后端：ASP.NET硬核处理（C#骚操作）

// 文档转换接口（假装支持所有格式）
[HttpPost]
public ActionResult ConvertDoc(HttpPostedFile file)
{
    var fileType = Path.GetExtension(file.FileName).ToLower();
    string html;
    
    // 根据文件类型召唤不同神器
    switch (fileType)
    {
        case ".docx":
            using (var doc = new Spire.Doc.Document())
            {
                doc.LoadFromStream(file.InputStream);
                html = doc.SaveToHtml();
                // 处理图片：Spire导出的是base64，得转存OSS
                html = ReplaceBase64Images(html);
            }
            break;
        case ".pptx":
            // 假装PPT也有魔法处理（实际要加钱）
            html = "加钱可解锁PPT转换功能";
            break;
        default:
            html = "这预算只够处理Word（狗头）";
            break;
    }
    
    return Content(html);
}

// 图片上传到OSS（阿里云SDK骚操作）
public string UploadToOSS(Stream imageStream)
{
    var fileName = Guid.NewGuid() + ".jpg";
    var client = new OssClient(endpoint, accessKeyId, accessKeySecret);
    client.PutObject(bucketName, "news/" + fileName, imageStream);
    return "https://" + bucketName + "." + endpoint + "/news/" + fileName;
}

// 偷公众号图片（需配置代理防封）
public JsonResult StealWeChatImage(string url)
{
    using (var http = new HttpClient())
    {
        var imageBytes = http.GetByteArrayAsync(url).Result;
        var newUrl = UploadToOSS(new MemoryStream(imageBytes));
        return Json(new { newUrl });
    }
}