【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的热加载问题,每次保存代码。都会自己在生成一个组件,之前的还会存在,还未找到具体解决方法。

相关推荐
北城以北88881 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室1 小时前
【react18原理探究实践】更新调度的完整流程
前端·react.js
FuckPatience3 小时前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
有梦想的攻城狮4 小时前
从0开始学vue:vue和react的比较
前端·vue.js·react.js
silent_missile6 小时前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
克里斯蒂亚诺更新7 小时前
微信小程序app.js中每30秒调用一次wx.getLocation
javascript·微信小程序·小程序
鄃鳕7 小时前
C++坑系列,C++ std::atomic 拷贝构造函数问题分析与解决方案
java·javascript·c++
duansamve8 小时前
React 18+TS中使用Cesium 1.95
react.js·typescript·cesium
Never_Satisfied8 小时前
在JavaScript / HTML中,实现`<iframe>` 自适应高度
开发语言·javascript·html
koooo~10 小时前
Vue3中的依赖注入
前端·javascript·vue.js