当前位置: 首页 > news >正文

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文件

简介 希望在项目中&#xff0c;在线预览.csv文件&#xff0c;本以为插件很多&#xff0c;结果都只是支持excel&#xff08;.xls、.xlsx&#xff09;一到.csv就歇菜。。。 关于文件预览 vue-office&#xff1a;文档、 查看在线演示demo&#xff0c;支持docx、.xlsx、pdf、ppt…...

基于VUE实现语音通话:边录边转发送语言消息、 播放pcm 音频

文章目录 引言I 音频协议音频格式:音频协议:II 实现协议创建ws对象初始化边录边转发送语言消息 setupPCM按下通话按钮时开始讲话,松开后停止讲话播放pcm 音频III 第三库recorderplayer调试引言 需求:电台通讯网(电台远程遥控软件-超短波)该系统通过网络、超短波终端等无线…...

PMP--一、二、三模、冲刺--分类--变更--技巧--特点

文章目录 一模二模三模冲刺14.敏捷--不确定性、风险和生命周期选择14.敏捷--特点--敏捷范围灵活&#xff0c;敏捷拥抱变更14.敏捷--阶段关口--在不同的组织、行业或工作类型中&#xff0c;阶段关口可能被称为阶段审查、阶段门、关键决策点和阶段入口或阶段出口。组织可以通过这…...

CSS Grid 布局实战:从入门到精通

文章目录 前言一、CSS Grid 布局概述1.1 什么是 CSS Grid 布局&#xff1f;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远程仓库&#xff0c;gitee码云例&#xff0c;Github_哔哩哔哩_bilibili 1、登gitee码云/Github 登录 - Gitee.com https://github.com/ &#xff08;没账号的注册一下就行&#xff09; 点击如下图位置的创…...

Java爬虫(HttpURLConnection)详解

文章目录 Java爬虫&#xff08;HttpURLConnection&#xff09;详解一、引言二、准备工作1、环境配置2、理解HttpURLConnection 三、发送GET请求1、创建URL对象2、打开连接3、设置请求方法4、连接并读取响应5、处理返回的数据 四、发送POST请求1、设置输出2、发送请求体3、读取响…...

基于STM32的智能停车管理系统设计

引言 随着城市汽车保有量的增加&#xff0c;停车难问题日益严重&#xff0c;传统停车管理方式效率低下&#xff0c;无法满足现代化需求。为了解决这一问题&#xff0c;本项目基于STM32微控制器设计了一种智能停车管理系统。系统能够通过传感器实时监测停车位的使用情况&#x…...

【循环神经网络】

循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类用于处理序列数据的神经网络&#xff0c;擅长处理具有时间依赖或顺序结构的数据。RNN通过循环连接的结构&#xff0c;使得当前时刻的输出可以受之前时刻信息的影响&#xff0c;因此被广泛应用于自然语…...

优选算法 - 4 ( 链表 哈希表 字符串 9000 字详解 )

一&#xff1a;链表 1.1 链表常用技巧和操作总结 1.2 两数相加 题目链接&#xff1a;两数相加 /*** 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操作系统中&#xff0c;Process Environment Block (PEB&#xff0c;进程环境块) 是一个包含特定进程信息的数据结构。它可以被用于反调试中 如何获取PEB指针&#xff1f; 在Windows操作系统中&#xff0c;获取PEB指针的常见方法主要有以下几种。&#xff1a; 1. 使…...

STM32开发基础阶段复习

1.使用寄存器方式点亮LED灯的三个步骤是什么&#xff1f; 首先使能RCC_APB2ENR&#xff08;外设时钟使能寄存器&#xff09;对应的GPIO端口时钟,即给LED这个外设使能时钟。 配置对应GPIO端口&#xff0c;配置为通用推挽输出&#xff0c;输出速度可以选择最大。 将GPIO端口输…...

搜维尔科技:SenseGlove触觉反馈手套开箱+场景测试

搜维尔科技&#xff1a;SenseGlove触觉反馈手套开箱场景测试 SenseGlove触觉反馈手套开箱场景测试...

在k8s上部署Crunchy Postgres for Kubernetes

目录 一、前言二、安装Crunchy Postgres for Kubernetes三、部署一个简单的postgres集群四、增加pgbouncer五、数据备份六、备份恢复七、postgres配置参数七、数据导入 一、前言 Crunchy Postgres可以帮助我们在k8s上快速部署一个高可用、具有自动备份和恢复功能的postgres集群…...

大模型(LLMs)进阶篇

大模型&#xff08;LLMs&#xff09;进阶篇 一、什么是生成式大模型&#xff1f; 生成式大模型&#xff08;一般简称大模型LLMs&#xff09;是指能用于创作新内容&#xff0c;例如文本、图片、音频以及视频的一类深度学习模型。相比普通深度学习模型&#xff0c;主要有两点不…...

近几年新笔记本重装系统方法及一些注意事项

新笔记本怎么重装系统&#xff1f; 近几年的新笔记本默认开启了raid on模式或vmd选项&#xff0c;安装过程中会遇到问题&#xff0c;新笔记本电脑重装自带的系统建议采用u盘方式安装&#xff0c;默认新笔记本有bitlocker加密机制&#xff0c;如果采用一键重装系统或硬盘方式安装…...

小程序19-微信小程序的样式和组件介绍

在小程序中不能使用 HTML 标签&#xff0c;也就没有 DOM 和 BOM&#xff0c;CSS 也仅支持部分选择器 小程序提供了 WXML 进行页面结构的编写&#xff0c;WXSS 进行页面的样式编写 WXML 提供了 view、text、image、navigator等标签构建页面结构&#xff0c;小程序中标签称为组件…...

Chrome 浏览器开启打印模式

打开开发者工具ctrl shift p输入print 找到 Emulate CSS print media type...

Git回到某个分支的某次提交

1.切换到需要操作的分支&#xff08;<branch-name>是分支名称&#xff09;。 命令如下&#xff1a; git checkout <branch-name> 2.获取代码的提交记录 。命令如下&#xff1a; git log 按q退出当前命令对话。 获取到某次提交或者合并的hash值&#xff08;下文…...

[前端面试]javascript

js数据类型 简单数据类型 null undefined string number boolean bigint 任意精度的大整数 symbol 创建唯一且不变的值&#xff0c;常用来表示对象属性的唯一标识 复杂数据类型 object&#xff0c;数组&#xff0c;函数,正则,日期等 区别 存储区别 简单数据类型因为其大小固定…...

对象的初步认识

#对象可组织数据&#xff08;如统计数据的表格&#xff09; 下以表格为例 1.设计一个表格:(None为初始值设定&#xff0c;表示无) class a; ##1None ##2None 2.创建一个表格 变量a 3.对对象的属性进行赋值 变量.##1"##" 变量.##2"##" 4.查询对象中…...

计算机毕业设计springboot在线病患管理系统 基于SpringBoot的智慧医疗就诊服务平台设计与实现 基于Java Web的医院数字化门诊住院一体化系统开发

计算机毕业设计springboot在线病患管理系统79jbb1co &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着我国医疗资源分布不均、基层医疗服务能力不足等问题的日益凸显&#xff…...

MacOS开发环境配置:OpenClaw+GLM-4.7-Flash联调指南

MacOS开发环境配置&#xff1a;OpenClawGLM-4.7-Flash联调指南 1. 为什么选择这个组合&#xff1f; 去年我在做一个自动化文档处理项目时&#xff0c;发现市面上的AI工具要么隐私性不足&#xff0c;要么灵活性太差。直到偶然接触到OpenClaw这个开源框架&#xff0c;才找到了理…...

服务器 网络科技运行

服务器是网络科技运行的核心支撑&#xff0c;承担着数据存储、处理、应用部署及资源调度等关键职能&#xff0c;在网络科技领域&#xff0c;服务器的稳定运行直接关系到整个业务系统的顺畅与否&#xff0c;无论是企业内部的办公系统、数据管理平台&#xff0c;还是面向公众的互…...

macOS 环境下的 Fugu14 越狱实战:从环境配置到 Unc0ver 完美激活

1. 准备工作&#xff1a;搭建macOS越狱环境 在开始Fugu14越狱之前&#xff0c;我们需要确保macOS环境配置完善。我实测发现&#xff0c;很多新手卡在第一步环境搭建&#xff0c;其实只要按顺序完成这些准备&#xff0c;后面流程会顺利很多。 首先需要安装Python 3.8或更高版本…...

如何用League-Toolkit提升你的英雄联盟游戏体验

如何用League-Toolkit提升你的英雄联盟游戏体验 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾经在英雄联盟游戏中感到效…...

Deepin Boot Maker:智能解析引擎驱动的跨平台启动盘制作方案

Deepin Boot Maker&#xff1a;智能解析引擎驱动的跨平台启动盘制作方案 【免费下载链接】deepin-boot-maker 项目地址: https://gitcode.com/gh_mirrors/de/deepin-boot-maker Deepin Boot Maker是一款采用智能解析引擎的跨平台开源工具&#xff0c;通过自动化流程与硬…...

终极风扇控制指南:如何用FanControl 264版彻底告别电脑噪音烦恼

终极风扇控制指南&#xff1a;如何用FanControl 264版彻底告别电脑噪音烦恼 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tr…...

避开这3个坑!MIPI走线设计如何减少对GSM信号的干扰(含阻抗匹配计算)

避开这3个坑&#xff01;MIPI走线设计如何减少对GSM信号的干扰&#xff08;含阻抗匹配计算&#xff09; 在消费电子硬件设计中&#xff0c;MIPI接口与射频信号的共存问题一直是工程师面临的棘手挑战。特别是当设备需要同时支持高清显示和GSM通信功能时&#xff0c;MIPI信号对GS…...

金融Agent再获近2亿加码!启明红杉高瓴集体押注,5个月内连获两轮融资

允中 发自 凹非寺量子位 | 公众号 QbitAI近日&#xff0c;金融AI领跑者讯兔科技&#xff08;Alpha派&#xff09;正式完成近2亿元A轮融资。继去年10月完成超亿元Pre-A轮融资后&#xff0c;讯兔科技在短短5个月内再获顶级机构强强加持。本轮由启明创投、红杉中国、高瓴创投共同领…...

Windows服务器部署:OpenClaw守护进程+Qwen3-32B镜像长期运行

Windows服务器部署&#xff1a;OpenClaw守护进程Qwen3-32B镜像长期运行 1. 为什么需要服务器级部署&#xff1f; 去年我尝试在个人笔记本上运行OpenClaw时&#xff0c;经常遇到两个头疼的问题&#xff1a;一是夜间执行任务时电脑休眠导致流程中断&#xff0c;二是长时间运行后…...