【JS】将表格数据下载为 .csv 文件

news/2024/11/16 19:37:35/

文章目录

    • 代码实现

代码实现

1. 将表格数据转换为字符串格式
2. 字符串格式里面的,逗号表示换列
3. 字符串格式里面的\n符号表示换行
  • 实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button type="button" id="button"> 下载文件</button></body><script type="text/javascript">const titleTable = ['A', 'B', 'C', 'D'];const dataTable = [{a: 1,b: 2,c: 3,d: 4,e: 5,}, {a: 1,b: 2,c: 3,d: 4,e: 5,}]function onDownload() {const data = `${dataTable.map((item) => [item.a, item.b, item.c, item.d].toString()).join('\n')}\n`;const title = `${titleTable.toString()}\n`;// encodeURIComponent 解决中文乱码const url = `data:text/csv;charset=utf-8,\ufeff${encodeURIComponent(`${title}${data}`)}`;// 创建a标签const link = document.createElement('a');link.href = url;link.download = 'test.csv';link.click();}// 获取按钮const button = document.getElementById('button')// 给按钮添加点击事件button.onclick =onDownload()</script>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/698730.html

相关文章

一分钟快速制作电子签名

将签名用黑笔写在白纸上拍照用Photoshop打开照片选择魔棒工具点击背景&#xff08;注意签名字体中间的小空隙处也要放大用魔棒工具进行点击&#xff0c;这一步的目的是消除背景&#xff0c;只留下签名字体本身&#xff09;右键&#xff0c;选择反向Ctrl J将新建的图层保存为PN…

GIMP制作电子签名

首先拿张纸&#xff0c;黑色笔&#xff0c;写名字&#xff0c;拍下来&#xff0c;裁剪。 然后用GIMP打开&#xff0c;点击颜色-》色阶&#xff0c;将输入色阶下面的白色小箭头往左拖动即可将签名变白。 如果是蓝色字想转黑色字&#xff0c;可以使用去饱和度实现。

用ps制作电子签名

1.准备图片&#xff0c;手写的图片 2.打开ps&#xff0c;点击工具“选择”调颜色如下&#xff1a; 3.再新建一个透明画布 4.把选择的字拖到画布上&#xff0c;保存为png模式就行了 图片拍得不是很清晰。清晰效果更好

PS 制作电子签名

一、提取签名 1、选择-色彩范围 2、选择-扩大选取 3、ctrlJ生成新图层&#xff0c;把“背景”图层关闭&#xff08;点一下左边的眼睛&#xff09; 二、框定签名范围 4、左侧框选工具&#xff0c;选择合适大小&#xff0c;鼠标放置其中&#xff0c;ctrlc复制 三、生成签名…

使用matlab制作电子签名

因为要用到电子签名&#xff0c;找了网上的教程&#xff0c;发现要用到PS&#xff0c;但是我没装&#xff0c;所以就用matlab写了一个小代码&#xff0c;突然发现效果不错&#xff0c;所以打算分享一下。 1.先用手机拍一张白底黑字的签名图片 2.打开matlab&#xff0c;复制如下…

PS制作电子签名

用白纸手写签名&#xff08;黑色笔&#xff0c;要黑一点&#xff0c;可以描黑一下效果好&#xff09;裁剪一下签名&#xff0c;只要签名的图片大小然后用ps打开写好的签名点击菜单栏->>选择-->>色彩范围然后用鼠标单击黑色的签名&#xff0c;然后确定然后会看到名字…

电子签名制作

白纸手写签名并拍照PS打开&#xff08;CtrlO&#xff09;CtrlL调出色阶&#xff0c;调整滑块&#xff0c;让字体更清晰&#xff0c;背景更白选择&#xff0c;色彩范围&#xff0c;吸取文字颜色&#xff08;有时可能选择反了&#xff0c;选择取反即可&#xff09;CtrlJ 复制一个…

VUE实现电子签名

啥也不说了直接上代码 <template><div><div class"block-panel"><canvas ref"canvas" class"canvas" mousedown"beginningDraw" mouseup"endingDraw"mouseleave"drawLeave" mousemove"…