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

相关推荐
整点可乐1 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码2 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
BUG创建者15 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
南方kenny28 分钟前
Mock.js:前端开发的假数据神器
前端·javascript
AliciaIr33 分钟前
深入理解React Hook:useRef的底层机制与高级应用
前端·react.js
1024小神39 分钟前
Cocos游戏开发中,如何动态加载资源和远程资源 resources
前端·javascript
猫和老许1 小时前
Vue 3 拖拽排序功能优化实现:从原理到实战应用
前端·javascript·vue.js
sq8001 小时前
ag-grid-vue3 降级,支持低版本浏览器
前端·javascript·vue.js
兔年鸿运Q小Q1 小时前
html转word下载
javascript·vue.js·word
华洛1 小时前
Agent应用落地,必不可少的三大辅助系统
前端·javascript·vue.js