当前位置: 首页 > Web前端 > HTML5

JavaScript读取剪贴板中的表格生成图片

时间:2023-04-05 16:36:01 HTML5

原始JavaScript读取剪贴板中的表格并生成图像演示地址。大家可以访问以下地址体验各个demohttps://fairyever.github.io/excel-to-image-demo/需求前几天公司要求做一个image,可以用在花了半天天把Excel表格的控件粘贴到输入框里。写下来,做好记录。具体效果可以参考京东客服聊天界面。在输入框中粘贴表单后,会生成一张图片,发送给执行步骤。具体来说,以下只是系统的演示。下面的演示都是在这样一个输入框里进行的:粘贴Excel表格here

使用了VUE和bootstrap4以及HTML2canvas测试表单测试环境windows浏览器环境Chrome|win10inParallelsDesktopmac浏览器环境Chrome|macOSSierra10.12.4剪贴板中的代码省略了一些不重要的ContentCDNlibraryHTML

检查值类型</h1>在此处粘贴Excel表

结果打印在控制台

JavaScriptvarvm=newVue({el:'#app',mounted:function(){this.$refs.input.addEventListener("paste",function(e){如果(!(e.clipboardData&&e.clipboardData.items)){return;}for(vari=0;i...省略...王舞22未知未知text/rtf编码文本{\rtf1\mac\ansicpg10008{\fonttbl{\f0\fnil\fcharset134;}{\f1\fnil\fcharset134{\f16\fnil......image/png可以在后面的测试中获取。这是一个图像文件,但不是图像对象,更像是文件选中的文件//consoleprintisemptytrytodisplaytext/html数据代码HTML在此处粘贴Excel表单
尝试使用text/html类型的数据如果可以获取到数据,这里会显示结果<templatev-if="tempData">数据源代码JavaScriptvarvm=newVue({el:'#app',data:{tempData:''},mounted:function(){var_this=thisthis.$refs.input.addEventListener("paste",function(e){if(!(e.clipboardData&&e.clipboardData.items)){return;}if(e.clipboardData.items[1].type==='text/html'){e.clipboardData.items[1].getAsString(函数(str){_this.tempData=str})}});}})resultmacwindows结论text/html类型的数据在mac上是可用的(比如用在使用electron开发的macOS应用中),但这不适用于windows平台使用text/html类型的数据生成图片更进一步。由于mac上可以使用text/html类型的数据,所以尝试使用该数据生成可以上传到服务器的图片资源。代码引入新库HTML比较长,请访问仓库查看源码JavaScript关键部分var_this=thisthis.$refs.input.addEventListener("paste",function(e){if(!(e.clipboardData&&e.clipboardData.items)){return;}if(e.clipboardData.items[1].type==='text/html'){e.clipboardData.items[1].getAsString(function(str){_this.tempData=strVue.nextTick(function(){html2canvas(_this.$refs.tempGroup,{onrendered:function(canvas){_this.$refs.canvasGroup.appendChild(canvas)_this.base64=canvas.toDataURL()}})})})}})结果(mac)到目前为止在mac上一切正常!接下来,我们尝试使用mac和windows共享的数据类型来分析并使用image/png数据生成图片代码。注意该方法不需要html2canvasHTML比较长,请访问仓库查看源码。JavaScript的关键部分是for(vari=0;i