原文
演示地址
你可以访问下面的地址体验每个demo
需求
前些天公司要求做一个可以在输入框粘贴Excel表格的控件，也算是折腾了半天时间，写下来做个记录
具体效果可以参考京东客服聊天界面，在输入框粘贴表格后会生成图片发送出去
实现步骤
具体当时怎么栽的坑就不具体说了，下面只是系统的演示一遍步骤
以下演示都是在这样的一个输入框中进行：
在这里粘贴Excel表格
使用了 VUE 和 bootstrap4 以及 HTML2canvas
测试表格
测试环境
windows
浏览器环境 Chrome | win10 in Parallels Desktop
mac
浏览器环境 Chrome | macOS Sierra 10.12.4
剪贴板里有什么
代码
省略了部分不重要的内容
CDN库
HTML
检查值类型
在这里粘贴Excel表格结果在控制台打印
JavaScript
var vm = new Vue({ el: '#app', mounted: function() { this.$refs.input.addEventListener("paste", function(e) { if (! (e.clipboardData && e.clipboardData.items)) { return; } for (var i = 0; i < e.clipboardData.items.length; i++) { console.log(e.clipboardData.items[i].type); } }); } 结果
mac
text/plaintext/htmltext/rtfimage/png
windows
text/plaintext/rtfimage/png
分析
可见在 windows 环境下，剪切板里的内容少了一个 text/html
检查获取到的实际值
代码
for (var i = 0; i < e.clipboardData.items.length; i++) { var item = e.clipboardData.items[i] if (item.kind === "string") { item.getAsString(function (str) { console.log(str); }) }} 结果
text/plain
纯文本
姓名 年龄 职业 email 张三 20 不详 不详 李四 21 不详 不详 王五 22 不详 不详
text/html
HTML字符串
... 省略 ... 王五 22 不详 不详
text/rtf
编码后的文本
{\rtf1\mac \ansicpg10008{\fonttbl{\f0\fnil \fcharset134 ËÎÌå;}{\f1\fnil \fcharset134{\f16\fnil ...... image/png
在后面的测试中可以得到这是一个图片文件，但不是一个图片对象，更像文件选择得到的文件
// 控制台打印为空
尝试显示 text/html 类型的数据
代码
HTML
在这里粘贴Excel表格尝试使用
text/html类型数据如果可以获取到数据，将会在这里显示结果
JavaScript
var vm = new Vue({ el: '#app', data: { tempData: '' }, mounted: function () { var _this = this this.$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 = str }) } }); }}) 结果
mac
windows
结论
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 = str Vue.nextTick(function(){ html2canvas(_this.$refs.tempGroup, { onrendered: function(canvas) { _this.$refs.canvasGroup.appendChild(canvas) _this.base64 = canvas.toDataURL() } }) }) }) }}) 结果(mac)
到此为止在mac上一切顺利！，下面我们尝试使用mac和windows共有的数据类型进行解析
使用image/png类型的数据生成图片
代码
注意，这种方式不需要 html2canvas
HTML比较长，请访问查看源码
JavaScript关键部分
for (var i = 0; i < e.clipboardData.items.length; i++) { if (e.clipboardData.items[i].type === 'image/png'){ var pasteFile = e.clipboardData.items[i].getAsFile(); var reader = new FileReader(); reader.readAsDataURL(pasteFile); reader.onload=function(e){ _this.base64 = this.result; } }} 结果
mac
windows
总结
使用 image/png 数据是可行的，而且这种方式相较于 html2canvas 还有一个优点就是即使表格尺寸超过了一屏的大小(宽度和高度都可以)，仍然可以很好的生成base64图片
所有源码请移至
end