原文

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/png

windows

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读取剪贴板中的表格生成图片的更多相关文章

  1. Java 读取PDF中的表格

    一.概述 本文以Java示例展示读取PDF中的表格的方法.这里导入Spire.PDF for Javah中的jar包,并使用其提供的相关及方法来实现获取表格中的文本内容.下表中整理了本次代码使用到的主 ...

  2. Java使用POI读取Word中的表格

    个人博客 地址:https://www.wenhaofan.com/a/20190627135921 代码 package live.autu.word; import java.io.FileInp ...

  3. Java读取word中表格

    因为要新建一个站,公司要把word表格的部分行列存到数据库中.之前用java操作过excel,本来打算用java从word表格中读取数据,再存到数据库中,结果因为权限不够,无法访问公司要写的那个数据库 ...

  4. 2018-10-04 [日常]用Python读取word文档中的表格并比较

    最近想对某些word文档(docx)的表格内容作比较, 于是找了一下相关工具. 参考Automate the Boring Stuff with Python中的word部分, 试用了python-d ...

  5. poi读取word2003（.doc文档）中的表格

    poi读取word2003(.doc文档)中的表格 Jakarta POI 是apache的子项目,目标是处理ole2对象.它提供了一组操纵Windows文档的Java API.在网上见到好多通过po ...

  6. Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容，读取一段话中相同样式内容，理解Document中run

    from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...

  7. Delphi读取不Word中不规则表格数据并转换成标准表格

    程序需要,需要将word中不规则的表格数据转换为标准的表格,即合并的单元格按正常格式解析,word中的表格格式如下: 解析后数据如下: 借鉴了网上代码,如下处理: procedure TfrmMain ...

  8. python读取word中的段落、表、图+++++++++++Doc转换Docx

    读取文本.图.表.解压信息 import docx import zipfile import os import shutil '''读取word中的文本''' def gettxt(): file ...

  9. 大型 JavaScript 应用架构中的模式

    原文:Patterns For Large-Scale JavaScript Application Architecture by @Addy Osmani 今天我们要讨论大型 JavaScript ...

随机推荐

  1. C语言刷二叉树（一）基础部分

    二叉树基础部分 144. 二叉树的前序遍历 方法一:递归 /** * Definition for a binary tree node. * struct TreeNode { * int val; ...

  2. （七）目标检测算法之SSD

    系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...

  3. linux基础篇--复习重点成长之路

    linux阶段性复习提纲 1.xshell与shell之间的区别 shell ​ shell是一个由C语言编写的程序,它的主要作用就是在用户和操作系统之间搭起一道桥梁(人机操作界面).直接在命令行执行 ...

  4. yum源出现 AppStream‘ 缓存失败，忽略这个 repo。同步仓库 ‘base‘ 缓存失败，忽略这个 repo 的问题解决办法

    今天安装Wget时出现如下错误 到 /etc/yum.repos.d/目录下编辑CentOS-Base.repo ,更改为如下内容. vim CentOS-Base.repo # CentOS-Bas ...

  5. java.sql.SQLException: Unable to load authentication plugin 'caching_sha2_password'.

    原来是mysql5.X,升级到8.X,连接数据库就报错: Unable to load authentication plugin 'caching_sha2_password'. 原因分析: 可能为 ...

  6. min_25 筛学习小记

    min_25筛 由 dalao min_25 发明的筛子,据说时间复杂度是极其优秀的 \(O(\frac {n^{\frac 3 4}} {\log n})\),常数还小. 1. 质数 \(k\) 次 ...

  7. 安全学习笔记-web安全之XSS攻击

    web安全之XSS攻击 XSS 即跨站脚本攻击,是 OWASP TOP10 之一.它的全称为 Cross-site scripting,因为 CSS 这个简称已经被占用表示为前端三剑客之一的CSS,所 ...

  8. vue中使用keepAlice的各种问题

    项目需求:从项目列表页index,进入到列表的详情页detail,再从detail返回到index,需要缓存index的数据 在App.vue中的配置 <template> <div ...

  9. [Java编程思想] 第二章 一切都是对象

    第二章 一切都是对象 2.1 用引用操纵对象   创建一个String引用: String s;   这里所创建的只是引用,并不是对象.   创建一个引用的同时便初始化: String s = &qu ...

  10. python+pytest接口自动化(9)-cookie绕过登录(保持登录状态)

    在编写接口自动化测试用例或其他脚本的过程中,经常会遇到需要绕过用户名/密码或验证码登录,去请求接口的情况,一是因为有时验证码会比较复杂,比如有些图形验证码,难以通过接口的方式去处理:再者,每次请求接口 ...