Extjs实现在线预览word文件，仅支持docx

实现思路参考vue的docx-preview的word在线预览。
注：引入polyfill.min.js、jszip.min.js、docx-preview.js文件；
js文件下载：
废话不多说，上菜：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预览docx</title>
    <link rel="stylesheet" type="text/css" href="public/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="public/css/ext-zh_CN.css"/>
    <script type="text/javascript" src="public/js/ext-all.js"></script>
    <script type="text/javascript" src="public/js/ext-lang-zh_CN.js"></script>
    <!--optional polyfill for promise-->
    <script src="public/js/polyfill.min.js"></script>
    <!--lib uses jszip-->
    <script src="public/js/jszip.min.js"></script>
    <!--docx-preview-->
    <script src="public/js/docx-preview.js"></script>

</head>
<body>
<script>
    Ext.onReady(function () {
        Ext.getBody().mask('加载中');//加载时页面遮盖

        var formPanel = Ext.create('Ext.form.Panel', {
            id: 'formPanel',
            layout: 'column',
            frame: true,
            border: false,
            defaults: {
                labelAlign: 'right',
                labelWidth: 100,
                inputWidth: 200,
                margin: '4,0,0,0'
            },
            items: [{
                xtype: 'filefield',//上传附件
                name: 'CONTENT_',
                fieldLabel: 'docx',
                buttonText: '请选择',
                inputWidth: 340,
                style: 'clear: both',//换行显示
                listeners: {
                    change: function (cmp, newValue, oldValue, eOpts) {//预览docx
                        var imageRegExp = new RegExp('^[^\\.]+(\\.)(docx)$');
                        var path = cmp.getValue();//获取附件本地路径
                        if (path != null && !Ext.isEmpty(path)) {
                            var url = "file://" + path;
                            console.log(imageRegExp.test(url));
                            if (imageRegExp.test(url)) {//正则校验，只能上传docx文件限制
                                var imagePreviewDom = Ext.getCmp('imagePreview').getEl().dom;//预览的docx框DOM对象
                                imagePreviewDom.src = Ext.BLANK_IMAGE_URL;//覆盖原来的文件
                                var file = cmp.fileInputEl.dom.files[0];//获取本地文件
                                //调用docx预览
                                docx.renderAsync(file, document.getElementById("imagePreview"), null, {
                                    ignoreHeight: false,// 禁止页面渲染高度
                                    ignoreWidth: false,// 禁止页面渲染宽度
                                    ignoreFonts: false,// 禁止字体渲染
                                    breakPages: true,// 在分页符上启用分页
                                    debug: false,// 启用额外的日志记录
                                    experimental: false,//启用实验性功能（制表符停止计算）
                                    className: "docx",// 默认和文档样式类的类名/前缀
                                    inWrapper: true,// 启用围绕文档内容渲染包装器
                                    trimXmlDeclaration: true,//如果为真，xml声明将在解析之前从xml文档中删除
                                    ignoreLastRenderedPageBreak: true,//禁用lastRenderedPageBreak元素的分页
                                    renderHeaders: true,
                                    renderFooters: true,
                                    renderFootnotes: true,
                                    renderEndnotes: true,
                                    useBase64URL: false,
                                    useMathMLPolyfill: false
                                }).then(x => console.log("docx: finished"));
                            } else {
                                Ext.MessageBox.alert('提示', '请选择docx格式文件', Ext.MessageBox.ERROR);
                            }
                        }
                    }
                }
            }]
        });

        var imagePreviewPanel = Ext.create('Ext.panel.Panel', {
            id: 'imagePreviewPanel',
            layout: 'column',
            frame: true,
            autoScroll: true,
            items: [{
                xtype: 'box',//预览图片框
                id: 'imagePreview',
                autoScroll: true
            }]
        });

        Ext.create('Ext.container.Viewport', {//整体布局
            layout: {
                type: 'border',//border布局
                regionWeights: {//四个角的归属
                    west: -1,
                    north: 1,
                    south: 1,
                    east: -1
                }
            },
            defaults: {
                border: false
            },
            items: [{
                region: 'north',
                items: [formPanel]
            }, {
                region: 'center',
                layout: 'fit',
                items: [imagePreviewPanel]
            }]
        });

        _init();
    });

    function _init() {//初始化。页面和所有自动加载数据全部加载完成后调用。
        for (var i = 0; i < Ext.data.StoreManager.getCount(); i++) {//检查是否所有自动加载数据已经全部加载完成
            if (Ext.data.StoreManager.getAt(i).isLoading()) {
                return;
            }
        }

        Ext.getBody().unmask();//取消页面遮盖
    }

</script>
</body>
</html>
效果图：
posted on 2022-07-28 16:21 斑驳。阅读(1799) 评论(2) 收藏举报