【MD,Docx、xlsx】等前端插件推荐

起来改bug

已于 2024-07-01 11:31:23 修改

阅读量635

点赞数 1

文章标签：前端

于 2023-08-23 11:46:51 首次发布

本文链接：https://blog.csdn.net/q553866469/article/details/132448947

版权

1.MD格式文件

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

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

1）@uiw/react-markdown-editor

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

<MarkdownEditor
    value={`### test`}
    onChange={() => {}}
    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

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

<MarkdownPreview source={other_data?.release_note} />

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文件

2.1 推荐一个在线预览wod文件的插件docx-preview：

1）安装

npm install docx-preview --save-dev

2）使用

import * as docx from "docx-preview";

创建容器

<div id="doc_container"></div>

将文件读入容器

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

预览效果：

2.3 mammoth

它是一个将docx文件转为html读取并展示的js库，也可以预览，但是展示出来的效果，默认不会很好看。

import mammoth from 'mammoth';

// r是接口返回的二进制文件，读取在div中即可
let htmlContainer: any = document.getElementById("doc_container");
    mammoth.convertToHtml({arrayBuffer: r}).then((resultObject) => {
    htmlContainer.innerHTML = resultObject.value;
})

 <div id="doc_container"></div>

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中的内容，我们默认只有一个表

let workbook = XLSX.read(data, { type: "array" });
let sheetNames = workbook.SheetNames; // 工作表名称
let worksheet = workbook.Sheets[sheetNames[0]];

然后转成html写在页面上即可

let html = XLSX.utils.sheet_to_html(worksheet);
document.getElementsByClassName('xlsxClass')[0].innerHTML = html

4.拖拽组件 react-beautiful-dnd

// DragDropContext在最外层
// onDragEnd拖拽完成后的回调函数
<DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="droppable">
        {
            (provided) => (
                // 这个div元素上绑定拖拽范围
                <div {...provided.droppableProps} ref={provided.innerRef}>
                     // 遍历list
                    {
                        list.map((f: any) => 
                            <Draggable key={f.id} draggableId={f.id} index={index}>
                                {(provided) => (
                                    // 每一行拖拽的范围
                                    <div
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                    >
                                        // 这里绑定属性是只有拖动这里才能拖拽，就是可灵活绑定到其他html元素上
                                        <Col offset={4} {...provided.dragHandleProps}>
                                            <IconFont className={`icon-drag`}/>
                                          </Col>
                                    </div>
                                )}
                            </Draggable>
                        )
                    }
                </div>
            )
        }
        // 这里是拖动中留空格
        {provided.placeholder}
    </Droppable>
</DragDropContext>

可以对照下面的API介绍看上述代码