前端复制字符串到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包括集成的带有版本的控制系统,文件和目录选项,重复器,源代码编译,测试工具,数据库…

windows10和ubuntu16.04双系统下时间不对的问题

先在ubuntu下更新一下时间,确保时间无误: sudo apt-get install ntpdate sudo ntpdate time.windows.com然后将时间更新到硬件上: sudo hwclock --localtime --systohc over转载于:https://www.cnblogs.com/warling/p/5965650.html

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可以说是近些年来最火的前端框架之一,越…

(转)[Android分享] Android中用Ant把ndk的so文件打包进apk

在用ant进行打包apk文件时&#xff0c;如果用到ndk&#xff0c;那么如何把so文件打包进去呢&#xff1f;其实很简单&#xff0c;就在target为package的xml段里加上这2行<arg value"-nf"/><arg value"${external-lib-ospath}" />其中${external…

辨异 —— 不同的编程语言(编译型语言、解释型语言、动态语言、静态语言)...

Java 越来越强大&#xff0c;覆盖领域也越来越多&#xff0c;变得无所不能的时候&#xff0c;和那些仅专注于一个领域的的编程语言相比&#xff0c;它反而显得不够专业&#xff1b;1. 算符优先级 优先级意味着结合律&#xff1b; C/C&#xff1a;位运算符&#xff08;&|^&a…

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

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

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

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

数据结构之递归

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

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

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

Scala笔记整理

使用类型参数化数组&#xff08;Array&#xff09;创建java.math.BigInteger实例&#xff1a; var big new java .math.BigInteget(“12345678”) 对数组进行访问&#xff1a;圆括号形式 val greetingStrings :Array[String] new Array[String] (3) greetingStrings(0) “he…

vh,vw单位你知道多少?

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

Oracle教程之oracle 给用户授权

oracle 给用户授权_oracle 用户授权_oracle用户授权grant(授权)命令下面对创建的用户user01授权&#xff0c;命令如下&#xff1a;grant connect, resource to user01;(2)revoke(撤消)权限已授予的权限可以撤消。例如撤消(1)中的授权&#xff0c;命令如下&#xff1a;revoke co…