【pptx-preview】react+pptx预览

pptx前端预览插件

pptx-preview - npm

1.插件使用

javascript 复制代码
let pptxPreviewer: any = null;
const dom: any = document.getElementById(`pptx-wrapper`);
            if (!dom) return;
            pptxPreviewer = init(dom, { width: 800 });
            fetch(url).then((response: any)=> response.arrayBuffer()).then((res) =>{
                console.log('res:', res);
                pptxPreviewer.preview(res);
                setTimeout(() => {
                    set_file_loading(false)
                }, 1000)
            })

注意:组件卸载的时候清除掉预览实例

javascript 复制代码
return () => {
            pptxPreviewer = null;
        };

标签处写个html即可

javascript 复制代码
<div
  className="pptx-container"
  id={`pptx-wrapper`}
></div>

2.问题

我这里项目中的使用是二次封装了个预览插件,并且需求是需要同时展示原文和译文,也就是说,读写内容的时候注意需要加唯一id,否则会有问题,也要每次卸载都删掉实例才行。

即使这样,因为react的热加载问题,每次保存代码。都会自己在生成一个组件,之前的还会存在,还未找到具体解决方法。

相关推荐
海的诗篇_44 分钟前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
黄瓜沾糖吃2 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟2 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo2 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
爱分享的程序员3 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
Jackson_Mseven3 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
pe7er3 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er4 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz4 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端4 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构