js原生实现将excel表格显示到html网页
前言
近期项目有个需求，需要将excel表格中的内容通过粘贴的形式显示在网页上，在页面以表格的形式展示，于是开始了该任务的开发。
首先就是需要理清思路步骤
- 监听ctrl+v
-
获取剪切板内容
-
格式化剪切板内容以表格形式展示在页面上
有了上述步骤，开始来进行代码编写
监听ctrl+v
监听按键有两种方式，一种是通过document.onkeydown方式，一种是通过插件hotkeys-js的方式
通过原生方式如下：
document.onkeydown = function(event){
if(event.ctrlKey && event.keyCode === 86){
console.log("按下了ctrl+v")
}
}
通过hotkeys-js如下：
import hotkeys from 'hotkeys-js'
hotkeys('ctrl+v', (keyboardEvent, hotkeysEvent) => {
console.log("按下了ctrl+v")
})
获取剪切板内容
获取剪切板内容目前也是存在两种方案，一种是通过document.execCommand('paste')，另一种是通过浏览器自带的clipboard来实现。
此处我实现的是通过原生来处理的，思路是通过一个div，将其内容替换，生成一个表格，然后通过表格来获取数据。因为Excel粘贴到页面会自动生成表格，有助于我们后续的数据结构化，下面来看实现实现：
<script setup lang="ts">
import {ref} from 'vue'
import hotkeys from 'hotkeys-js'
interface ITableData{
id: string
name: string
}
// 当前粘贴的dom节点
const pasetDom = ref()
const tableList = ref<ITableData[]>([])
// 监听粘贴事件
hotkeys('ctrl+v', (keyboardEvent, hotkeysEvent) => {
// 清空dom内容
pasetDom.value.innerHTML = ''
// dom获取焦点
pasetDom.value.focus()
// 执行粘贴，插入内容
document.execCommand('paste')
setTimeout(() => {
/**
* 异步执行，避免内容尚未插入
*/
const list = pasetDom.value.querySelectorAll('tr')
const temp: ITableData[] = []
if (list.length > 0) {
// 循环遍历，格式化数据，此处认为Excel没有表头，第一行即为数据
Array.from(list).forEach((item: HTMLElement, i: number) => {
// 除去两端空格
let tdList = item.querySelectorAll('td')
let tempObj:ITableData = {id: '',name: ''}
// 此处设置key顺序需要和Excel中的列顺序一致
const objKeys: string[] = Object.keys(tempObj)
Array.from(tdList).forEach((citem: HTMLElement, index: number) => {
tempObj[objKeys[index]] = citem.innerText?.trim()
})
temp.push(tempObj)
})
pasetDom.value.blur()
}
tableList.value = temp
}, 0)
})
</script>
<template>
<div ref="pasetDom" class="pasteDom" contenteditable="true" />
</template>
<style scoped lang="scss">
.pasteDom{
position: fixed;
z-index: -99;
opacity: 0;
top: 0;
height: 10px;
}
</style>
到此页面的基本逻辑就显示完成了，剩下的就是将数据渲染到页面中了
页面渲染
页面渲染此处采用的elementUI方式，直接上代码
<template>
<el-table :data="tableList" style="width: 100%">
<el-table-column type="index" label="序号" width="80" />
<el-table-column prop="id" label="id" />
<el-table-column prop="name" label="名称" />
</el-table>
</template>
如上，通过复制粘贴的方式将Excel内容显示到页面上的功能已经实现完成。
