【场景方案】关于excel、pdf、word、富文本编辑器、思维导图制作、图表制作、日历这类第三方库的推荐_富文本编辑器支持pdf和word吗

excel推荐

上传与数据解析

主要推荐的库是xlsx（用于数据分析与下载）

可以看我这篇文章【场景方案】我所遇到的有关前端文件上传的知识点归纳，欢迎大家来补充

前端下载excel

例如我们前端生成了数组形式的数据，想填入excel并且下载下来。

import { read, utils } from 'xlsx'

let data = [
    { name: "张三", id: 109, score: 995 },
    { name: "张三", id: 109, score: 995 },
    { name: "张三", id: 109, score: 995 }
]
//转化data数组
const ws = utils.json_to_sheet(data); // 转成sheet对象
const wb = utils.book_new(); // 创建个workbook
utils.book_append_sheet(wb, ws, "people"); // 把sheet对象筛入workbook中
writeFile(wb, "testl.xlsx") // 这个api就是下载成文件
1
2
3
4
5
6
7
8
9
10
11
12

或者是说，有个表格标签，我们想把这个标签的内容下载成excel下来

const tableDom = this.$refs.excelTable;
const tableWs = utils.table_to_sheet(tableDom);
const wb2 = utils.book_new();
utils.book_append_sheet(wb2, tableWs, "sheet1");
writeFile(wb2, "tableTest.x1sx");
1
2
3
4
5

预览

vue推荐使用@vue-office/excel，具体怎么用可以百度下，这里就提几个要点。

它是可以直接预览public下的本地文件的，src的路径直接填进去即可。

如果拿到的是blob文件，就需要转成base64在放入src中。

同样这个库还有word、pdf的预览版本@vue-office/docx，@vue-office/pdf ，@vue-office/ppt

react推荐使用react-file-viewer，具体怎么用可以百度下。

---

pdf推荐

预览

目前推荐pdf.js的最新版本，支持电子签章，功能可以自己改。

可能还需要自己改下跨域限制，直接把报错信息搜百度就知道怎么改了。

目前版本唯一不足的是新版对移动端的支持不是特别好。

具体坑要如何填可以参考：【前端pdf.js在线预览大坑合集】

---

word推荐

数据解析

主要用途是把数据填入一个固定模板的word文档中后下载。

用到的库比较多

import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saves } from 'file-saver'
1
2
3

let data = [ // 这些是要写入word中的数据
    { name: "张三", id: 109, score: 995 },
    { name: "张三", id: 109, score: 995 },
    { name: "张三", id: 109, score: 995 }
]
let file = e.target.files[0]; // 拿到word文件
file.arrayBuffer().then((res) => { // 通过转成arrayBuffer去操作二进制数据
    let zip = new PizZip(res); // 先把数据进行压缩
    const doc = new Docxtemplater(zip); // Docxtemplater只能接收一个压缩过的数据
    doc.setData(data) // 写入数据
    doc.render(); // 渲染数据
    const out = doc.getZip().generate({ // 生成压缩包
        type: "blob",
        mimeType: "application/vnd.openm1formats-officedocument.wordprocessingmI.document"
    })
})
saveAs(out, "test1.docx") // 打包下载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

缺点就是传入的word文件需要满足一些特定的写法，才能把数据精确写入，用户体验不是很好。

预览

可以用docx-preview、@vue-office/docx、react-file-viewer。

具体怎么用可以百度下，和上面的excel预览很像。

样式是否能与word软件里看的一样还没考究过

---

富文本编辑器推荐

个人认为开源中最强大的是tinymce，建议安装最新版，因为最新版的api很多，国内中文社区那个版本就老了点。

参考配置：

initConfig = {
    language: 'zh_CN', // 中文语言（需要自己网上找包放入）
    promotion: false, // 禁用升级标识
    menubar: 'file edit insert view table tools help', // 菜单栏显示什么
    plugins: // 启用的插件
        'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs importword kityformula-editor attachment layout letterspacing upfile',
    // 还有（等等）： importword media视频，upfile文件上传，attachment附件， blockquote引用，emoticons表情，anchor锚点 formatselect 字段（功能重复）axupimgs 多图片 preview 预览
    toolbar: // 工具栏中显示的插件
        'fontfamily styles fontsize | forecolor backcolor bold italic underline strikethrough bullist numlist | alignleft aligncenter alignright alignjustify outdent indent | lineheight indent2em letterspacing | wordimport table image | undo redo restoredraft cut copy paste pastetext |\
                       hr pagebreak insertdatetime bdmap formatpainter link kityformula-editor fullscreen layout print subscript superscript removeformat charmap',
    toolbar_mode: 'wrap',
    setup: (editor) => {
        // 这里可做一些toolbar上的自定义功能

        // 自定义word导入功能更
        editor.ui.registry.addButton('wordimport', {
            icon: 'importword',
            tooltip: '导入word',
            onAction: function () {
                let uploadClick =
                    document.getElementById('uploadClick')
                uploadClick.click()
            },
        })

        // 设置默认字体
        // editor.on('init', function (ed) {
        //     ed.target.editorCommands.execCommand(
        //         'fontName',
        //         false,
        //         '宋体'
        //     )
        // })
    },
    removed_menuitems: // 菜单移除指定项
        'preview, media, template, codesample, emoticons, anchor, code',
    height: 600, // 编辑器高度，min_height max_height
    contextmenu: 'table', // 隐藏右键菜单，但表格右键可显示功能菜单
    pagebreak_separator: // 原分页转成指定分页标签
        "<p style='page-break-before: always;'></p>",
    convert_fonts_to_spans: false, // 不要对span做转译
    // extended_valid_elements: 'span', // 把span标签上的属性清除（慎用，开了会把span上原来一些样式清除了）
    font_size_formats: // 字体大小选项
        '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 44px 48px 56px 72px',
    font_family_formats: // 字体选项
        "宋体='SimSun';微软雅黑=Microsoft YaHei;仿宋体=FangSong;黑体=SimHei;隶书='隶书'",
    // ;方正楷体='方正楷体' 方正仿宋='方正仿宋';方正小标宋='方正小标宋';方正黑体='方正黑体';
    // 还有其他字体 Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;serif;sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif
    // 预置图片---------------------------
    autosave_ask_before_unload: false,
    // 自定义图片上传动作
    automatic_uploads: true, // 这个一定要开启，否则图片上传函数不会触发
    // images_upload_base_path: '/demo',
    images_upload_handler: (blobInfo, progress) => {
        return new Promise((resolve, reject) => {
            // 把上传的图片src换成真实图片链接地址
            const formData = new FormData()
            formData.append(
                'files',
                blobInfo.blob(),
                blobInfo.filename()
            )
            // 然后就可以把图片通过接口上传给后端，后端返回图片地址，执行resolve(url)图片就会替换成地址
            // 注意要实现在上传图片的过程中给个加载动画，全部替换完毕再结束加载
        })
    },
    // 自定义样式（在外面自己写是不生效的）
    content_style: `
    html{
        height: 100% !important;
    }
    body{
        font-family: SimSun;
    }
    .mce-content-body{
        height: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        display: flex;
        flex-direction: column;
    }
    .mce-content-body p:last-child{
        flex: 1 !important;
    }
    p {
        margin-block-start: 0;
        margin-block-end: 0;
    }
    ol {
        margin-block-start: 0;
        margin-block-end: 0;
    }
    `,
    branding: false, // 去掉右下角广告
    paste_preprocess: function (plugin, args) {
        // args.content = xxx 可通过这个对复制进来的数据进行拦截修改
    },
    format_noneditable_selector: 'label', // 指定可编辑样式的标签
    // inline_boundaries_selector: 'label',
    // custom_ui_selector: '.label-selector',
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

---

思维导图推荐

3年前用的go.js，当时感觉是最强大的，但是需要收费，可破解非商用。

之前写的配置项记录可供大家参考：【GoJS使用】GoJS在vue中的入门使用教程

---

图表推荐

echarts应该是目前国内最好的吧，也是国内为数不多能拿到世界台面上的库。就是太强大功能太多不好学哈哈哈哈哈。

---

日历推荐

FullCalendar个人感觉挺好的，不过如果实现的功能比较简单，优先使用你引用的UI组件库里的日历组件。