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组件。
效果
简单粗暴无需手动添加样式，引入调用即可 。
heiho.js github ：用于渲染弹窗
PapaParse github：用于解析csv文件
源码
<!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年就是低谷期。
我也是时常跟媳妇说，再失业了，如果找不到合适的码农岗位，我就要转行了。自古逢秋悲寂寥，我言秋日胜春朝。
相关文章：
vue2项目中在线预览csv文件
简介 希望在项目中，在线预览.csv文件，本以为插件很多，结果都只是支持excel（.xls、.xlsx）一到.csv就歇菜。。。 关于文件预览 vue-office：文档、 查看在线演示demo，支持docx、.xlsx、pdf、ppt…...
基于VUE实现语音通话：边录边转发送语言消息、 播放pcm 音频
文章目录 引言I 音频协议音频格式：音频协议：II 实现协议创建ws对象初始化边录边转发送语言消息 setupPCM按下通话按钮时开始讲话，松开后停止讲话播放pcm 音频III 第三库recorderplayer调试引言 需求：电台通讯网（电台远程遥控软件-超短波）该系统通过网络、超短波终端等无线…...
PMP--一、二、三模、冲刺--分类--变更--技巧--特点
文章目录 一模二模三模冲刺14.敏捷--不确定性、风险和生命周期选择14.敏捷--特点--敏捷范围灵活，敏捷拥抱变更14.敏捷--阶段关口--在不同的组织、行业或工作类型中，阶段关口可能被称为阶段审查、阶段门、关键决策点和阶段入口或阶段出口。组织可以通过这…...
CSS Grid 布局实战：从入门到精通
文章目录 前言一、CSS Grid 布局概述1.1 什么是 CSS Grid 布局？1.2 主要特点 二、基本概念2.1 网格容器2.2 网格线2.3 网格轨道2.4 网格区域 三、常用属性3.1 定义网格结构3.2 控制网格项的位置3.3 控制网格间距3.4 自动填充和重复 四、实践案例4.1 项目结构4.2 HTM…...
git创建远程仓库，以gitee码云为例GitHub同理
git远程Remote服务端仓库构建的视频教程在这 Git建立服务端Remote远程仓库，gitee码云例，Github_哔哩哔哩_bilibili 1、登gitee码云/Github 登录 - Gitee.com https://github.com/ （没账号的注册一下就行） 点击如下图位置的创…...
Java爬虫（HttpURLConnection）详解
文章目录 Java爬虫（HttpURLConnection）详解一、引言二、准备工作1、环境配置2、理解HttpURLConnection 三、发送GET请求1、创建URL对象2、打开连接3、设置请求方法4、连接并读取响应5、处理返回的数据 四、发送POST请求1、设置输出2、发送请求体3、读取响…...
基于STM32的智能停车管理系统设计
引言 随着城市汽车保有量的增加，停车难问题日益严重，传统停车管理方式效率低下，无法满足现代化需求。为了解决这一问题，本项目基于STM32微控制器设计了一种智能停车管理系统。系统能够通过传感器实时监测停车位的使用情况&#x…...
【循环神经网络】
循环神经网络（Recurrent Neural Network, RNN）是一类用于处理序列数据的神经网络，擅长处理具有时间依赖或顺序结构的数据。RNN通过循环连接的结构，使得当前时刻的输出可以受之前时刻信息的影响，因此被广泛应用于自然语…...
优选算法 - 4 （ 链表 哈希表 字符串 9000 字详解 ）
一：链表 1.1 链表常用技巧和操作总结 1.2 两数相加 题目链接：两数相加 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* …...
信息来检测调试)
CTF-RE 从0到N: windows反调试-获取Process Environment Block(PEB)信息来检测调试
在Windows操作系统中，Process Environment Block (PEB，进程环境块) 是一个包含特定进程信息的数据结构。它可以被用于反调试中 如何获取PEB指针？ 在Windows操作系统中，获取PEB指针的常见方法主要有以下几种。： 1. 使…...
STM32开发基础阶段复习
1.使用寄存器方式点亮LED灯的三个步骤是什么？ 首先使能RCC_APB2ENR（外设时钟使能寄存器）对应的GPIO端口时钟,即给LED这个外设使能时钟。 配置对应GPIO端口，配置为通用推挽输出，输出速度可以选择最大。 将GPIO端口输…...
搜维尔科技：SenseGlove触觉反馈手套开箱+场景测试
搜维尔科技：SenseGlove触觉反馈手套开箱场景测试 SenseGlove触觉反馈手套开箱场景测试...
在k8s上部署Crunchy Postgres for Kubernetes
目录 一、前言二、安装Crunchy Postgres for Kubernetes三、部署一个简单的postgres集群四、增加pgbouncer五、数据备份六、备份恢复七、postgres配置参数七、数据导入 一、前言 Crunchy Postgres可以帮助我们在k8s上快速部署一个高可用、具有自动备份和恢复功能的postgres集群…...
大模型（LLMs）进阶篇
大模型（LLMs）进阶篇 一、什么是生成式大模型？ 生成式大模型（一般简称大模型LLMs）是指能用于创作新内容，例如文本、图片、音频以及视频的一类深度学习模型。相比普通深度学习模型，主要有两点不…...
近几年新笔记本重装系统方法及一些注意事项
新笔记本怎么重装系统？ 近几年的新笔记本默认开启了raid on模式或vmd选项，安装过程中会遇到问题，新笔记本电脑重装自带的系统建议采用u盘方式安装，默认新笔记本有bitlocker加密机制，如果采用一键重装系统或硬盘方式安装…...
小程序19-微信小程序的样式和组件介绍
在小程序中不能使用 HTML 标签，也就没有 DOM 和 BOM，CSS 也仅支持部分选择器 小程序提供了 WXML 进行页面结构的编写，WXSS 进行页面的样式编写 WXML 提供了 view、text、image、navigator等标签构建页面结构，小程序中标签称为组件…...
Chrome 浏览器开启打印模式
打开开发者工具ctrl shift p输入print 找到 Emulate CSS print media type...
Git回到某个分支的某次提交
1.切换到需要操作的分支（<branch-name>是分支名称）。 命令如下： git checkout <branch-name> 2.获取代码的提交记录 。命令如下： git log 按q退出当前命令对话。 获取到某次提交或者合并的hash值（下文…...
[前端面试]javascript
js数据类型 简单数据类型 null undefined string number boolean bigint 任意精度的大整数 symbol 创建唯一且不变的值，常用来表示对象属性的唯一标识 复杂数据类型 object，数组，函数,正则,日期等 区别 存储区别 简单数据类型因为其大小固定…...
对象的初步认识
#对象可组织数据（如统计数据的表格） 下以表格为例 1.设计一个表格:(None为初始值设定，表示无) class a; ##1None ##2None 2.创建一个表格 变量a 3.对对象的属性进行赋值 变量.##1"##" 变量.##2"##" 4.查询对象中…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技
无需布线的革命：电力载波技术赋能楼宇自控系统 在楼宇自动化领域，传统控制系统依赖复杂的专用通信线路，不仅施工成本高昂，后期维护和扩展也极为不便。电力载波技术（PLC）的突破性应用，彻底改变了…...
理想汽车5月交付40856辆，同比增长16.7%
6月1日，理想汽车官方宣布，5月交付新车40856辆，同比增长16.7%。截至2025年5月31日，理想汽车历史累计交付量为1301531辆。 官方表示，理想L系列智能焕新版在5月正式发布，全系产品力有显著的提升，每…...
uniapp获取当前位置和经纬度信息
1.1. 获取当前位置和经纬度信息（需要配置高的SDK） 调用uni-app官方API中的uni.chooseLocation()，即打开地图选择位置。 <button click"getAddress">获取定位</button> const getAddress () > {uni.chooseLocatio…...
MySQL基本操作（续）
第3章：MySQL基本操作（续） 3.3 表操作 表是关系型数据库中存储数据的基本结构，由行和列组成。在MySQL中，表操作包括创建表、查看表结构、修改表和删除表等。本节将详细介绍这些操作。 3.3.1 创建表 在MySQL中&#…...