本文目录一览：
- 1、react–使用js-xlsx实现excel文件的导入导出及预览
- 2、pdf.js 如何预览本地文件
- 3、前台js有没有办法实现附件比如word或者pdf的预览
- 4、js怎么做本地的视频文件的预览
react–使用js-xlsx实现excel文件的导入导出及预览
最近公司项目要求对之前后端excel操作做优化，需要放到前端来做。讲道理，我觉得没啥子必要，尤其是当我在官网导入一张5k+的excel时浏览器卡死后更是觉得需求之智障。但是没法子，还是要先自己做出来看看实际效果才行，我直接原地6个点……
导出
安装依赖
cnpm i xlsx –save
实现
定义公共组件Excel，该组件需要提供导出按钮，当点击时触发相应逻辑
组件可接收的参数如下
默认值如下
根据传入的type类型决定到底是显示导入、导出、预览按钮还是都显示
当点击导出按钮，触发回调
引入xlsx
导出逻辑
首先要做的就是校验是否用户自己实现了导出函数，以及传入的数据是否为数据且是否为空，由于不止导出要用，故放到untils中作公共函数，其他的辅助函数也从中导出
isVoid函数
getTable函数
getSheetHead函数
format函数
getCharCol函数
导出结果如下
改进
可能你也发现了，导出的结果是没有样式信息的,那么如何增加样式呢？答案是xlsx-style
安装依赖
cnpm i xlsx-style –save
npm install file-saver –save
xlsx-style导入报错
将报错文件copy一份，修改后放到assets目录下
找到umijs的webpack配置文件，新增如下配置
增加文字颜色和首行高亮处理
增加辅助函数calculateWidth
增加辅助函数addHeadlineStyle
导出方式使用filesave
效果如下
导入
现在，我们来完成导入功能，并且导入后需要使用表格进行分页预览
新增modal弹窗，用作预览界面
对应函数renderBody如下
对应函数renderButton如下
对应函数onPageChange如下
点击导入按钮，回调处理如下
新增的辅助函数如下
新增组件状态如下
导入预览效果如下
文档
如有问题，欢迎评论指正哦~~
最后，还有个很重要的事情，点个赞再走吧，客官~~
pdf.js 如何预览本地文件
pdf.js预览文件必须只能是在服务器部署的项目路径下，不能通过修改配置的方式支持本地路径的文件，否则会有js跨域问题。如果要显示本地文件，可以折中考虑先做一个上传功能将文件上传到服务器上然后在页面上展示，这样基本实现了预览本地文件。
前台js有没有办法实现附件比如word或者pdf的预览
pdf的预览是可以实现的，world文档因为有复杂表格什么的不好处理，所以最好转换为pdf再预览；
pdf.js实现加载整个pdf
网页链接
js怎么做本地的视频文件的预览
用这个方法：varWordApp=newActiveXObject(“Word.Application”);//注：IE的ActiveX安全性能放开才行WordApp.Application.visible=false;varDoc=WordApp.documents.open(path);//对word的操作见office的MSDNWordApp.quit();
原创文章，作者：XISG，如若转载，请注明出处：https://www.506064.com/n/144357.html
微信扫一扫 
支付宝扫一扫 