前端复制字符串到excel生成表格

场景需求:前端页面有个按钮,点击时候会复制一段文本,然后将复制的文本直接copy黏贴到excel表格里,就会自动形成对应的表格数据。
在这里插入图片描述

以下代码可以直接复制使用(有效的点赞支持一波):

    copyAll () {let tableArr = [{ name: '张三', certno: '220381197902121201' },{ name: '李四', certno: '220381197902121202' },{ name: '王五', certno: '220381197902121203' },{ name: '赵六', certno: '22038119790212123X' },]//列表数据let strAll = `姓名\t证件号码\n`   // \t 相当于tab键 \n 是换行符  这里写上表头tableArr.forEach(ele => {//注意这里为什么多加个字符 '  是因为当该项是数字时候,若数字太长 在excel里是显示成E+展示不全  前面加上'后改想就变成字符串格式了 就会完全展示开let str1 = `${ele.name}\t'${ele.certno}\n` //注意使用模板字符串`` 可以识别转移字符串tab键\t和换行符\n// let str1 = `${ele.name}\t${ele.certno}\n`// let str1 = `${ele.name}\t${123}\n`strAll = strAll + str1 // 将其拼装成一个有格式的字符串即可})// 以下是复制逻辑let oInput = document.createElement('textarea') //textarea会复制保留格式oInput.value = strAlldocument.body.appendChild(oInput)oInput.select() // 选择对象;document.execCommand('Copy') // 执行浏览器复制命令this.$message({message: '信息已复制到剪切板!',type: 'success'})oInput.remove()},

逻辑: 前端将table数据拼接成一个字符串,这个字符串在对应位置包含到tab换列键\t和换行符\n

1.一开始我是直接将\t和\n写在字符串里,复制出来的文本就有\t和\n,但是这样是不行的,excel会直接将这些转义符理解成字符串显示出来
在这里插入图片描述

2.后来将\t和\n写模板字符串``里面,模板字符串会保留格式, 在复制到excel就可以生成表格了。
在这里插入图片描述

3.当该项是数字格式且太长时候回,会展示不全,而字符串格式可以全部展示开。 至于咋样设置成文本格式,我是凑巧点击将数字格式点成字符串后,发现前面多了个字符’ 才知道的,所以加上’ 就是字符串了。在这里插入图片描述 在这里插入图片描述

4.针对第三点,也可以不加’ 但是需要黏贴excel表前,需要将整个excel表设置为文本格式。
在这里插入图片描述

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

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

相关文章

[QUICK UI] 有哪些目前流行的前端框架

From: https://blog.csdn.net/qianduankuangjia/article/details/78185047 使用前端框架其实和开发的项目有一定的关系,因为在不同的项目中可能会用到不同的组件功能,这样说可能有一点片面,但是在面临几十种再做出选择的时候确实有一定的难度…

XP设置文件夹默认打开方式改为“资源管理器”

为什么80%的码农都做不了架构师?>>> 在“资源管理器”中单击“工具→文件夹选项→文件类型”,在“已注册的文件类型”下的列表框中找到一个名为“资料夹”的选项(按文件类型排序的话它会排在最后面几个),选…

2018年五大最佳前端框架比较,程序员会怎么选?

From: https://blog.csdn.net/qq_41852103/article/details/79619250 现在有大量的CSS前端框架可用。但真正好的屈指可数。本文将比较五个最佳前端框架,每个框架都有自己的长处和短处,以及特定的应用领域,使你可以根据特定项目的需求进行选择…

解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效

ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外面主动套一个div 在修改样式即可:getContainer"()>$refs.ref"

网络安全——ipsec

网络安全——ipsecInternet 协议安全性 (IPSec)”是一种开放标准的框架结构,通过使用加密的安全服务以确保在 Internet 协议 (IP) 网络上进行保密而安全的通讯,它通过端对端的安全性来提供主动的保护以防止专用网络与 Internet 的***Ipsec是一个协议集合…

vue-axios下载文件流blob,ie下载报传递给系统调用的数据区域太小.ie文件流下载报错;文件下载失败将blob的错误信息转换成json格式

本次下载是后台文件流传输,前端下载,前端将拿到的下载id和名称downloadName传递给下载方法;如果是多个下载,可以采用数组for循环 情景描述: 1.如果符合导出条件, 后端直接返回数据流,如下图所示…

前端开发框架对比

From: https://www.cnblogs.com/xtdxs/p/6540933.html 本文选取了 Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16 个国内外前端开发框架进行初步的横向比较,可…

持续集成工具FinalBuilder使用心得

FinalBuilder 使用这款自动化创建和发布管理工具,软件开发者可以定义和维护一个可靠的以及可重复创建的程序。FinalBuilder包括集成的带有版本的控制系统,文件和目录选项,重复器,源代码编译,测试工具,数据库…

yarn安装依赖包报错 error An unexpected error occurred: “https://registry.npm.taobao.orgnpm/element-ui: get

yarn安装依赖包报错,error An unexpected error occurred: “https://registry.npm.taobao.orgnpm/element-ui: getaddrinfo ENOTFOUND registry.npm.taobao.orgnpm registry.npm.taobao.orgnpm:443”. 这是因为网络不好导致的下载依赖包请求超时报错,…

从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)

From: https://blog.csdn.net/u012907049/article/details/72764151 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以说是近些年来最火的前端框架之一,越…

解决微信小程序报[ app.json 文件内容错误] app.json: app.json 未找到,未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。小程序app.json报错

编译报错:[ app.json 文件内容错误] app.json: app.json 未找到 原因:由于project.config.json文件的miniprogramRoot小程序根目录属性找不到aap.json的路径(可能是错误的路径,也可能是没有这一行代码); &…

css3新单位vw、vh、vmin、vmax的使用详解(附样例)

From: http://www.hangge.com/blog/cache/detail_1715.html 像 px、em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1,vw…

数据结构之递归

第一篇:数据结构之链表 第二篇:数据结构之栈和队列 第三篇:数据结构之二叉树 第四篇:数据结构之排序 第五篇:数据结构之字符串 在这篇文章里,我们主要讨论和递归相关的话题。递归是数据结构中解决复杂问题时…

HBuilderX搭建微信小程序;HBuilderX开发uni-app微信小程序;uni-app开发微信小程序;使用uni-app搭建微信小程序;使用uni-ui模板搭建微信小程序步骤

1.选择模板 uni-ui 2.得到创建项目 3.获取APPid 在微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.weixin.qq.com/ 并登陆 4.项目打包 打包后运行在微信小程序工具 才…

vh,vw单位你知道多少?

From: https://mp.weixin.qq.com/s/G7ZYCiO__4g2LjRuNl32Ew 响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小。 比如: (function (doc, win) { let docEl doc.documentElement let resizeEvt…

为什么说任何基于比较的算法将 5 个元素排序都需要 7 次?

排序算法对结果的唯一要求就是操作数满足全序关系: 如果 a≤b 并且 b≤c 那么 a≤c(传递性)。 对于 a 或 b,要不 a≤b,要不 b≤a(完全性)。这个问题可以用信息论来回答。 我从 1 到 5 中挑一个数…

iTerm2分屏时,如何使得新窗口的当前路径和前一个窗口一样?

From: https://segmentfault.com/q/1010000005355758 Preferences 里面设置 Working Directory 为 reuse previous sessions directory

全国80几所重点大学ftp资源库(经常逛逛可能有惊喜哦)很难收集的,知道其他的友友可以留言完善...

2019独角兽企业重金招聘Python工程师标准>>> 重庆交通大学外国语学院ftp \\202.202.240.93/ 密码:a 帐号:as 电子科技大学ftp    ftp://xsc. cuit. edu. cn/   大连理工大学    ftp://ftp. dlut. edu. cn   上海交通大学    ftp://mssite. sjtu. …

python发送包含html、图片、附件和链接的邮件

从我的126邮箱给我的QQ邮箱发送测试邮件 1.smtplib模块的使用 smtplib库用来发送邮件。需要用到的函数如下: 连接到SMTP服务器,参数为SMTP主机和端口: SMTP.connect([host[,port]]) 登录SMTP服务器,参数为邮箱用户名和密码&#x…

apiCloud中Frame框的操作,显示与隐藏Frame

Frame是一层一层的概念, 有的位于上层,有的位于下层。 1.加载菜单 2.加载页面层 3.首页拆分出内容层,这个时候内容层位于页面层的上方,当点击其他页面的时候,内容层遮挡住了他们 解决方案一 判断是否是首页&#xff0c…