网站搭建周期,免费个人网站建站申请,《新闻联播》正在直播,网络服务公司简介
希望在项目中#xff0c;在线预览.csv文件#xff0c;本以为插件很多#xff0c;结果都只是支持excel#xff08;.xls、.xlsx#xff09;一到.csv就歇菜。。。
关于文件预览
vue-office#xff1a;文档、 查看在线演示demo#xff0c;支持docx、.xlsx、pdf、ppt…简介
希望在项目中在线预览.csv文件本以为插件很多结果都只是支持excel.xls、.xlsx一到.csv就歇菜。。。
关于文件预览
vue-office文档、 查看在线演示demo支持docx、.xlsx、pdf、pptx格式优势可以vue组件形式嵌入系统只需要普通文档预览使用这个足矣。
univer文档、查看在线演示demo、支持docx、.xlsx、pdf、pptx格式以.xlsx为主不如vue-office接入简单也不如kkFileView、OnlyOffice支持的格式丰富。
kkFileView文档、查看在线演示demo、大部分格式都支持但需要后端部署优势比OnlyOffice支持格式更多。
OnlyOffice文档、vue3组件、大部分格式都支持但需要后端部署优势有vue3组件。
效果
简单粗暴无需手动添加样式引入调用即可 。 heiho.js github 用于渲染弹窗 PapaParse github用于解析csv文件
源码
!DOCTYPE html
htmlheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta namereferrer contentno-referrer /meta nameviewportcontentwidthdevice-width,initial-scale1.0,maximum-scale1.0,minimum-scale1.0,user-scalableno, viewport-fitcover /titlevue2项目中在线预览csv文件/title!-- 引入样式 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/kktsvetkov/heiho0.3.3/heiho.css /style/* 页面所需样式 */html,body,#app {width: 100%;margin: 0;padding: 0;}.cardBox {width: 50%;border-radius: 8px;display: flex;flex-direction: column;align-items: center;padding-top: 20px;margin: 0 auto;}/style
/headbody stylebackground: #eee;div idapp classpt10div classcardBox pl10 pr10 pt15 pb15 borBox bgf ml12 mr12 mb12 fz16p在线预览csv文件/pbutton clickviewForUrl通过在线可访问的csv地址的方式/buttonbr /button clickviewForFlie通过接口返回csv文件流的方式/button/div/div
/bodyscript srchttps://lib.baomitu.com/vue/2.6.14/vue.js/script
!-- 引入heiho --
script srchttps://cdn.jsdelivr.net/npm/kktsvetkov/heiho0.3.3/heiho.min.js/script
!-- 引入papaparse --
script srchttps://cdn.jsdelivr.net/npm/papaparse5.4.1/papaparse.min.js/script
scriptnew Vue({el: #app,data() {return {}},created() {},mounted() {},methods: {// 在线可访问的csv文件可通过路径方式预览viewForUrl(){Papa.parse(https://support.staffbase.com/hc/en-us/article_attachments/360009197071/email.csv, {download: true,complete: function(results) {const data results.data;// 渲染组件Heiho(data, { max: data.length });}});},// 无法访问的文件通过接口拿到文件流的方式预览viewForFlie(){fetch(https://support.staffbase.com/hc/en-us/article_attachments/360009197071/email.csv).then(response {if (response.ok) {return response.blob();}throw new Error(Network response was not ok.);}).then(blob {Papa.parse(blob, {complete: function(results) {const data results.data;// 渲染组件Heiho(data, { max: data.length, title: email.csv });}});})}}})
/script/html外传
期待2025、这几年互联网似乎进入了末期好像经济危机在身边可能十年后人们会谈论着202x年就是低谷期。 我也是时常跟媳妇说再失业了如果找不到合适的码农岗位我就要转行了。自古逢秋悲寂寥我言秋日胜春朝。
