JavaScript读取剪贴板中的表格生成图片
原文
演示地址
你可以访问下面的地址体验每个demo
https://fairyever.github.io/excel-to-image-demo/
需求
前些天公司要求做一个可以在输入框粘贴Excel表格的控件，也算是折腾了半天时间，写下来做个记录
具体效果可以参考京东客服聊天界面，在输入框粘贴表格后会生成图片发送出去
实现步骤
具体当时怎么栽的坑就不具体说了，下面只是系统的演示一遍步骤
以下演示都是在这样的一个输入框中进行：
<div class="input-group ma-b-10">
<span class="input-group-addon" id="basic-addon3">在这里粘贴Excel表格</span>
<input ref="input" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>使用了 VUE 和 bootstrap4 以及 HTML2canvas
测试表格
测试环境
windows
浏览器环境 Chrome | win10 in Parallels Desktop
mac
浏览器环境 Chrome | macOS Sierra 10.12.4
剪贴板里有什么
代码
省略了部分不重要的内容
CDN库
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://unpkg.com/vue"></script>HTML
<div class="container" id="app">
<h1>检查值类型</h1>
<div class="input-group ma-b-10">
<span class="input-group-addon" id="basic-addon3">在这里粘贴Excel表格</span>
<input ref="input" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<p><small>结果在控制台打印</small></p>
</div>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/plain
text/html
text/rtf
image/pngwindows
text/plain
text/rtf
image/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字符串
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link id=Main-File rel=Main-File
href="file://localhost/Users/liyang/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip.htm">
... 省略 ...
</tr>
<tr height=35 style='mso-height-source:userset;height:26.0pt'>
<td height=35 class=xl64 style='height:26.0pt;border-top:none'>王五</td>
<td class=xl65 style='border-top:none;border-left:none'>22</td>
<td class=xl65 style='border-top:none;border-left:none'>不详</td>
<td class=xl65 style='border-top:none;border-left:none'>不详</td>
</tr>
<!--EndFragment-->
</table>
</body>
</html>text/rtf
编码后的文本
{\rtf1\mac \ansicpg10008
{\fonttbl{\f0\fnil \fcharset134 ËÎÌå;}{\f1\fnil \fcharset134{\f16\fnil
......image/png
在后面的测试中可以得到这是一个图片文件，但不是一个图片对象，更像文件选择得到的文件
// 控制台打印为空尝试显示 text/html 类型的数据
代码
HTML
<div class="input-group ma-b-10">
<span class="input-group-addon" id="basic-addon3">在这里粘贴Excel表格</span>
<input ref="input" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="card ma-b-10">
<div class="card-body">
<h4 class="card-title">
尝试使用<code>text/html</code>类型数据
</h4>
<h6 class="card-subtitle mb-2 text-muted">
如果可以获取到数据，将会在这里显示结果
</h6>
<template v-if="tempData">
<div class="form-group">
<label for="exampleFormControlTextarea1">数据源码</label>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
v-model="tempData">
</textarea>
</div>
<div ref="tempGroup" v-html="tempData"></div>
</template>
</div>
</div>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 类型的数据，那就尝试使用这个数据生成可以上传至服务器的图片资源
代码
新引入了一个库
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>HTML比较长，请访问仓库查看源码
JavaScript关键部分
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
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
JavaScript读取剪贴板中的表格生成图片的更多相关文章
- Java 读取PDF中的表格
一.概述 本文以Java示例展示读取PDF中的表格的方法.这里导入Spire.PDF for Javah中的jar包,并使用其提供的相关及方法来实现获取表格中的文本内容.下表中整理了本次代码使用到的主 ...
- Java使用POI读取Word中的表格
个人博客 地址:https://www.wenhaofan.com/a/20190627135921 代码 package live.autu.word; import java.io.FileInp ...
- Java读取word中表格
因为要新建一个站,公司要把word表格的部分行列存到数据库中.之前用java操作过excel,本来打算用java从word表格中读取数据,再存到数据库中,结果因为权限不够,无法访问公司要写的那个数据库 ...
- 2018-10-04 [日常]用Python读取word文档中的表格并比较
最近想对某些word文档(docx)的表格内容作比较, 于是找了一下相关工具. 参考Automate the Boring Stuff with Python中的word部分, 试用了python-d ...
- poi读取word2003（.doc文档）中的表格
poi读取word2003(.doc文档)中的表格 Jakarta POI 是apache的子项目,目标是处理ole2对象.它提供了一组操纵Windows文档的Java API.在网上见到好多通过po ...
- Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容，读取一段话中相同样式内容，理解Document中run
from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...
- Delphi读取不Word中不规则表格数据并转换成标准表格
程序需要,需要将word中不规则的表格数据转换为标准的表格,即合并的单元格按正常格式解析,word中的表格格式如下: 解析后数据如下: 借鉴了网上代码,如下处理: procedure TfrmMain ...
- python读取word中的段落、表、图+++++++++++Doc转换Docx
读取文本.图.表.解压信息 import docx import zipfile import os import shutil '''读取word中的文本''' def gettxt(): file ...
- 大型 JavaScript 应用架构中的模式
原文:Patterns For Large-Scale JavaScript Application Architecture by @Addy Osmani 今天我们要讨论大型 JavaScript ...
随机推荐
- Spring Cloud Gateway 不小心换了个 Web 容器就不能用了，我 TM 人傻了
个人创作公约:本人声明创作的所有文章皆为自己原创,如果有参考任何文章的地方,会标注出来,如果有疏漏,欢迎大家批判.如果大家发现网上有抄袭本文章的,欢迎举报,并且积极向这个 github 仓库 提交 i ...
- 4.功能三：实现URL地址栏控制（15分） (1)获取到当前访问的控制器和方法（5分） (2)对当前访问的控制器和方法进行判断，有权限继续访问（5分） (3)无权限给出提示（5分）
<?php namespace app\admin\controller; use think\Controller; use think\Request; class Base extends ...
- Linux常用文件管理命令详解
cat cat命令用于连接文件并打印到标准输出设备上. 命令语法:cat [参数] [文件名] 参数说明: 参数 说明 -n 由1开始对所有输出的行数进行编号. -b 由1开始对所有输出的行数进行编号 ...
- 为什么 TCP 链接需要三次握手，两次不可以么，为什么？
两次握手 三次握手
- Linux开机自启应用&开机执行脚本&监听端口应用挂掉了执行启动脚本
linux开机自启 背景 目前要部署一个spring boot框架的jar包,实现开机启动项目或者应用挂掉了 执行启动脚本 在root目录下有一个启动项目的脚本: app_start.sh app_s ...
- .Net6 设置环境变量
开发过程中经常要发布一个版本到测试服上给测试人员测试,可能需要直接输出错误信息,需要设置环境变量为Development,如果是IIS可以通过设置IIS环境变量,见下面这篇文章 https://blo ...
- ArcMap操作随记（8）
1.构建两点之间连线 [构造视线] 2.编辑相邻多边形(边界等) [拓扑]工具条→[共享要素] 3.点要素空间分配 [创建泰森多边形]→[裁剪] 4.面要素空间分配 [要素转折点]→[创建泰森多边形] ...
- 关于 jmeter变量是否在引用时候需要加上引号的坑
今天在玩jmeter的时候,发现一个问题:一个关于 jmeter变量是否在引用时候需要加上引号的坑: 众所周知:jmeter引用变量的时候 需要使用${变量名} 但是:大家是否遇到过有时候变量名外需要 ...
- CSAPP-Lab05 Cache Lab 深入解析
本文首发于我的知乎专栏:https://zhuanlan.zhihu.com/p/484657229 实验概览 Cache Lab 分为两部分,编写一个高速缓存模拟器以及要求优化矩阵转置的核心函数,以 ...
- JavaWeb——Maven使用
5.1.创建一个javaWeb项目 选择使用摸版:勾选Create from archetype选项 选择相应的模板:选择org.apache.maven.archetypes:maven-arche ...