前端—word文档预览

前言DOCXdocx格式其实就是一个zip文件。我们可以用winrar打开docx文件，得到一堆文件，很像android程序源码或者win7桌面形式。用户可以在其中找到它。各种配置文件、文本文件和媒体文件。原理相当于用了两个文本文档，一个用来放文本信息，一个用来配置里面的格式，比如字体，字号等MIME类型application/vnd.openxmlformats-officedocument.wordprocessingml.templateMicrosoft在线预览Word、ppt、xls文件。缺点是：资源必须可以公开访问，不支持内网访问。实现示例效果图XDOC格式，支持docx、xls、pdf等多种格式预览。在线预览时，资源也必须可以公开访问。对于内网文件预览，可以通过部署私服来实现，稍微麻烦一些。在线预览方法与office在线预览效果相比，实现效果少了首行缩进、页间距等效果，整体预览比较接近。同时，对于图片预览，新增了缩放查看功能。mammothmammoth可用于将.docx文档（例如由MicrosoftWord创建的文档）转换为HTML。Mammoth专注于从文档中的语义信息生成简洁的HTML，而忽略了其他一些细节。例如，Mammoth会将所有具有“标题1”样式的段落转换为“h1”元素，而不是尝试完全复制标题的所有样式（字体、大小、颜色等）。列表。自定义从.docx样式到HTML的映射。例如，可以通过提供适当的样式映射将“WarningHeading”样式转换为“h1.warning”类。床单。表格本身的样式-例如边框-目前被忽略，但文本格式处理与文档的其余部分一致。脚注和尾注。图像。粗体、斜体、下划线、删除线、上标和下标。关联。新队。文本框。文本框的内容被视为包含文本框的段落之后的单独段落。使用示例importReact,{useEffect}from'react';importmammothfrom'mammoth';import{Card}from'antd';constFilePreview=()=>{constfile2ArrayBuffer=(file,callback)=>{fetch(file,{mode:'no-cors'}).then((response)=>response.blob()).then((res)=>{constreader=newFileReader();reader.readAsArrayBuffer(res);reader.onload=function(e){constarrayBuffer=e.target.result;callback(arrayBuffer);};});};useEffect(()=>{file2ArrayBuffer('http://mczaiyun.top/ht/3.docx',(arrayBuffer)=>{mammoth.convertToHtml({arrayBuffer},{includeDefaultStyleMap:true}).then((结果)=>{constdocEl=document.createElement('div');docEl.className='document-container';docEl.innerHTML=result.value;document.getElementById('docx').innerHTML=docEl.outerHTML;}）。抓住（（err)=>{console.log('err',err);//eslint-disable-line}).done();});},[]);return(