vue2项目中在线预览csv文件

简介

希望在项目中,在线预览.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组件。

效果

简单粗暴无需手动添加样式,引入调用即可
在这里插入图片描述

源码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="referrer" content="no-referrer" /><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" /><title>vue2项目中在线预览csv文件</title><!-- 引入样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kktsvetkov/heiho@0.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>
</head><body style="background: #eee;"><div id="app" class="pt10"><div class="cardBox pl10 pr10 pt15 pb15 borBox bgf ml12 mr12 mb12 fz16"><p>在线预览csv文件</p><button @click="viewForUrl">通过在线可访问的csv地址的方式</button><br /><button @click="viewForFlie">通过接口返回csv文件流的方式</button></div></div>
</body><script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入heiho -->
<script src="https://cdn.jsdelivr.net/npm/@kktsvetkov/heiho@0.3.3/heiho.min.js"></script>
<!-- 引入papaparse -->
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<script>new 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年就是低谷期。
我也是时常跟媳妇说,再失业了,如果找不到合适的码农岗位,我就要转行了。自古逢秋悲寂寥,我言秋日胜春朝。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59506.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Excel】身份证号最后一位“X”怎么计算

大多数人身份证号最后一位都是数字&#xff0c;但有个别号码最后一位却是“X"。 如果你查百度&#xff0c;会得到如下答案&#xff1a; 当最后一位编码是10的时候&#xff0c;因为多出一位&#xff0c;所以就用X替换。 可大多数人不知道的是&#xff0c;这个10是怎么来的…

【HAProxy09】企业级反向代理HAProxy高级功能之压缩功能与后端服务器健康性监测

HAProxy 高级功能 介绍 HAProxy 高级配置及实用案例 压缩功能 对响应给客户端的报文进行压缩&#xff0c;以节省网络带宽&#xff0c;但是会占用部分CPU性能 建议在后端服务器开启压缩功能&#xff0c;而非在HAProxy上开启压缩 注意&#xff1a;默认Ubuntu的包安装nginx开…

【Java Web】JSON 以及 JSON 转换

JSON&#xff08;JavaScript Object Notation&#xff09;一种灵活、高效、轻量级的数据交换格式&#xff0c;广泛应用于各种数据交换和存储场景。 基本特点 1、简单易用&#xff1a;JSON格式非常简单&#xff0c;易于理解和使用。 2、轻量级&#xff1a;相比XML等其他数据格…

第四十一章 Vue之初识VueX

目录 一、引言 1.1. vuex的概念 1.2. vuex使用场景 1.3. 优势 二、创建演示项目 2.1. 构建项目步骤 2.2. 项目最终生成结构 2.3. 创建项目文件 2.3.1. App.vue 2.3.2. Son1.vue 2.3.3. Son2.vue 三、创建一个空仓库 3.1. 安装vuex 3.2. 新建仓库 3.3. 挂载仓库…

gitlab-development-kit部署gitlab《二》

gitlab-development-kit部署gitlab《一》 环境 mac 12.7.4 xcode 14.2 gdk 0.2.16 gitlab-foss 13.7 QA xcode源码安装 # https://crifan.github.io/xcode_dev_summary/website/xcode_dev/install_xcode/ # https://xcodereleases.comopenssl1.1 源码安装 # https://open…

编程之路,从0开始:内存函数

Hello大家好&#xff01;很高兴我们又见面了。 给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 今天我们来讲C语言中的内存函数。 目录 1、memcpy内存复制 2、memmove可重叠内存拷贝 3、memset设置字符 4、memcmp比较 1、memcpy内存复制 memcpy就是内存复制…

【C语言】值传递和地址传递

值传递 引用传递&#xff08;传地址&#xff0c;传引用&#xff09;的区别 传值&#xff0c;是把实参的值赋值给行参 &#xff0c;那么对行参的修改&#xff0c;不会影响实参的值。 传地址&#xff0c;是传值的一种特殊方式&#xff0c;只是他传递的是地址&#xff0c;不是普通…

摘要与登记

10.15:mysql 10.16:redis, 10.17:k8s,netty,dubbo,设计模式 10.18:juc、 10.21:rabbitMQ、ElasticSearch 10.22:docker 10.23:k8s 10.24:springsecurity 10.30:spring事务 11.01:mysql 11.05:redis 11.06:k8s 11.07:netty、docker 11.08:设计模式 11.09:juc 11.11:rabbitMQ、sp…

Springboot采用jasypt加密配置

目录 前言 一、Jasypt简介 二、运用场景 三、整合Jasypt 2.1.环境配置 2.2.添加依赖 2.3.添加Jasypt配置 2.4.编写加/解密工具类 2.5.自定义加密属性前缀和后缀 2.6.防止密码泄露措施 2.61.自定义加密器 2.6.2通过环境变量指定加密盐值 总结 前言 在以往的多数项目中&#xff0…

axios平替!用浏览器自带的fetch处理AJAX(兼容表单/JSON/文件上传)

fetch 是啥&#xff1f; fetch 函数是 JavaScript 中用于发送网络请求的内置 API&#xff0c;可以替代传统的 XMLHttpRequest。它可以发送 HTTP 请求&#xff08;如 GET、POST 等&#xff09;&#xff0c;并返回一个 Promise&#xff0c;从而简化异步操作 基本用法 /* 下面是…

贪吃蛇小游戏设计

贪吃蛇小游戏 1.引言1.1 背景1.2 目的1.3 意义1.4 任务1.5 技术可行性分析1.5.1执行平台1.5.2 语言特性与功能方面 2.需求分析2.1 环境需求2.2开发环境分析2.3游戏功能分析2.4 游戏性能分析2.5 数据流图2.6 数据字典 3.概要设计3.1 设计思路3.2 游戏界面设计3.3 总设计模块的划…

go T 泛型

目录 1、类型约束 2、泛型函数 3、泛型结构体 4、泛型接口 5、以接口作为类型约束 关键词&#xff1a;泛型、类型参数、类型约束 Go 语言在 1.18 版本引入了泛型&#xff08;Generics&#xff09;特性&#xff0c;可以编写更通用、可复用的代码&#xff0c;泛型可以用于&a…

如何处理 iOS 客户端内 Webview H5 中后台播放的音视频问题

目录 问题描述Page Visibility API 的应用什么是 Page Visibility API&#xff1f;使用 Page Visibility API 暂停音视频完整解决方案1. 监听媒体的播放和暂停事件2. 防止自动播放3. 结合 Intersection Observer 进行媒体控制4. 手动处理应用生命周期中的事件 问题描述 在 iOS…

Matplotlib库中show()函数的用法

在Matplotlib库中使用show()函数是用于显示绘制的图形的函数。它将图形显示在屏幕上或保存到文件中。show()函数通常在绘制完图形后调用。 Matplotlib是一个用于绘制2D图形的Python库&#xff0c;它提供了丰富的绘图工具和函数&#xff0c;可以用于创建各种类型的图表&#xf…

DNS面临的4大类共计11小类安全风险及防御措施

DNS在设计之初&#xff0c;并未考虑网络安全限制&#xff0c;导致了许多问题。DNS安全扩展(DNSSEC)协议的开发旨在解决DNS的安全漏洞&#xff0c;但其部署并不广泛&#xff0c;DNS仍面临各种攻击。接下来我们一起看下DNS都存在哪些安全攻击及缓解措施&#xff0c;旨在对DNS安全…

蓝队知识浅谈(中)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;蓝队基础之网络七层杀伤链_哔哩哔哩_bilibili 本文主要分享一些蓝队相关的知识。 一、网络杀伤链 网络杀伤链&#xff08;Cyber Kill Chain&…

vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结

在 Vue 2 中&#xff0c;如果你想通过 ref 调用一个方法&#xff08;如 inputFocus&#xff09;来聚焦一个输入框&#xff0c;确保以下几点&#xff1a; 确保 ref 的设置正确&#xff1a;你需要确保在模板中正确设置了 ref&#xff0c;并且它指向了你想要操作的组件或 DOM 元素…

【大数据学习 | flume】flume的概述与组件的介绍

1. flume概述 Flume是cloudera(CDH版本的hadoop) 开发的一个分布式、可靠、高可用的海量日志收集系统。它将各个服务器中的数据收集起来并送到指定的地方去&#xff0c;比如说送到HDFS、Hbase&#xff0c;简单来说flume就是收集日志的。 Flume两个版本区别&#xff1a; ​ 1&…

Jmeter中的定时器(一)

定时器 1--固定定时器 功能特点 固定延迟&#xff1a;在每个请求之间添加固定的延迟时间。精确控制&#xff1a;可以精确控制请求的发送频率。简单易用&#xff1a;配置简单&#xff0c;易于理解和使用。 配置步骤 添加固定定时器 右键点击需要添加定时器的请求或线程组。选…

网络基础协议理论(DNS协议)

DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议是互联网的一项核心应用层协议&#xff0c;以下是对DNS协议的详细简述&#xff1a; 一、DNS协议的基本功能 DNS协议的主要功能是将人类易读的域名&#xff08;如www.example.com&#xff09;转换成计算…