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

相关推荐
守正出琦9 分钟前
HTML 常用标签速查表
前端·javascript·html
im_AMBER2 小时前
React 04
前端·react.js·前端框架·1024程序员节
fhsWar2 小时前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
Keepreal4963 小时前
Web Components简介及如何使用
前端·javascript·html
进击的野人3 小时前
JavaScript变量声明的前世今生:从var到let/const的演进
javascript
柯腾啊4 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
Cory.眼5 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李6 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
拖拉斯旋风6 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
可触的未来,发芽的智生8 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理