umi + react +pptx 实现前端在线预览pptx文件

最新推荐文章于 2024-08-08 08:09:23 发布

i_NEEDhLep

最新推荐文章于 2024-08-08 08:09:23 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/i_NEEDYoU/article/details/130680935

版权

ppt预览方法

下载pptx 预览文件https://pptx.js.org/pages/demo3.html
将对应的js 引入到文件里，我使用的是umi + react ,
文件格式是class 类型的，如果是hook可以使用useScript 的格式进行引入，
文件存放在umi 的pulic 文件夹下面（没有的话自己建一个），引入时前缀自动为/

const urlList = [
            '/js/jquery-1.11.3.min.js',
            '/js/jszip.min.js',
            '/js/filereader.js',
            '/js/d3.min.js',
            '/js/divs2slides.min.js',
            '/js/nv.d3.min.js',
            '/js/pptxjs.js',
        ]
        const scriptList: any = []
        for (let index = 0; index < urlList.length; index++) {
            const url = urlList[index];
            const script = document.createElement('script');
            script.async = false;
            scriptList.push(script);
            script.src = url;
            document.body.appendChild(script);
        }
        this.setState({
            scriptList: scriptList
        }, () => {
            this.fetchPPTX(this.props.filePath);
        })

从url 中获取pptx 文件

fetchPPTX = (uri: string) => {
        const that = this;
        Axios({
            method: 'get',
            url: uri,
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`, //如果需要鉴权
            },
            responseType: 'blob', //需要用blob类型
            onDownloadProgress: function (progressEvent) {
               // that.progressCallback(progressEvent) //下载的进度
            }
        }).then((res) => {
            // const containerWidth = this.container.offsetWidth;
            const blob = new Blob([res.data], { type: 'application/pptx' })
            that.setState({ iframeUrl: URL.createObjectURL(blob), pdf: URL.createObjectURL(blob), percent: 100 }, () => {
                that.preview();
            })
        })
    }

进行预览，详细配置查看官网

preview = () => {
        $("#ppt-view-result").pptxToHtml({
            pptxFileUrl: this.state.iframeUrl,
            fileInputId: "uploadFileInput",
            slideMode: true,
            keyBoardShortCut: false,
            slidesScale: '55%',
            mediaProcess: true,
            slideModeConfig: {  //on slide mode (slideMode: true)
                first: 1,
                nav: true, /** true,false : show or not nav buttons*/
                navTxtColor: "black", /** color */
                navNextTxt: "&#8250;", //">"
                navPrevTxt: "&#8249;", //"<"
                showPlayPauseBtn: true,/** true,false */
                keyBoardShortCut: true, /** true,false */
                showSlideNum: true, /** true,false */
                showTotalSlideNum: true, /** true,false */
                autoSlide: 1, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
                randomAutoSlide: false, /** true,false ,autoSlide:true */
                loop: false,  /** true,false */
                background: "black", /** false or color*/
                transition: "slid", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
                transitionTime: 1 /** transition time in seconds */
            }
        });
    }

render 返回值