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.查询对象中…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成，具体方法取决于设备类型（如USB麦克风、3.5mm接口麦克风或HDMI音频输入）。以下是详细指南： 1. 连接音频输入设备 USB麦克风/声卡：直接插入树莓派的USB接口。3.5mm麦克…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件，这个上传文件是整体功能的一部分，文件在上传的过程中…...
pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决
问题： pgsql数据库通过备份数据库文件进行还原时，如果表中有自增序列，还原后可能会出现重复的序列，此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”，…...
Appium下载安装配置保姆教程（图文详解）
目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...