前端常用插件推荐

1.MD格式文件

我们经常会遇到md格式文件的编辑和预览，推荐两个插件：

@uiw/react-markdown-editor，@uiw/react-markdown-preview，不同框架应该有对应的版本，这里是react为例子，也是用过其他的组件，但都多少会有些问题，例如marked组件，下面直接使用吧：

1）@uiw/react-markdown-editor

这个组件是一个富文本组件，类似于我们在编辑csdn文章：

 {}}
    visible={true}
/>

这里面还有一些其他属性，请参考：

react-markdown-editor: 基于React的Markdown 编辑器组件。https://gitee.com/uiw/react-markdown-editor/#https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fuiwjs%2Freact-markdown-preview%2Ftree%2Fv2.1.0%23options-props

2) @uiw/react-markdown-preview

这个组件仅提供只读，不支持编辑，根据使用场景选择就好：

GitHub - uiwjs/react-markdown-preview at v2.1.0React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode. - GitHub - uiwjs/react-markdown-preview at v2.1.0https://github.com/uiwjs/react-markdown-preview/tree/v2.1.0#options-props

2.在线预览docx、doc文件

推荐一个在线预览wod文件的插件：

1）安装

npm install docx-preview --save-dev

2）使用

import * as docx from "docx-preview";

创建容器

将文件读入容器

let htmlContainer: any = document.getElementById("doc_container");
            docx.renderAsync(r, htmlContainer)
              .then((_x: any) => console.log("docx"));

 预览效果：

3. 预览xlsx文件

使用xlsx插件将文件中的数据转出来，然后使用就可以自定义样式进行展示了：

1）安装

npm install xlsx --save-dev

2）使用

import * as docx from "docx-preview";
import XLSX from 'xlsx';

后端接口返回的是二进制数据，就是blob格式：

 需要将文件格式转为 Uint8Array类型：

const data = new Uint8Array(await blob.arrayBuffer()); 

接下来就是使用xlsx来将表格中的数据读出来了

 

读出来的tableData就是一个json数据；