js實作將excel表格copy到頁面

點擊打開視頻講解更加詳細

其實最核心的技術，還是copy的是我們粘貼板上的資料
就像平常怎么粘貼復制其他的資料一樣，只是我們在excel粘貼的是一個表格資料
這時我們首先也時獲取我們粘貼板上的資料，如何對粘貼板上的資料進行處理，處理成
我們想要的表格形式，

完整案例：

<template>
  <div id="app">
    <textarea
      rows="3"
      cols="60"
      id="txtContent"
      @keydown="onkeydown"
      @mousedown="mousedown"
    ></textarea>
    <table id="table" border="1"></table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      keyCodeCtrl: 0,
      keyCodeV: 0,
    };
  },
  mounted() {},
  components: {},
  methods: {
    //監聽滑鼠右鍵粘貼事件
    mousedown(e) {
      if (e.button == 2) {
        this.clippedRange();
      }
    },
    //監聽鍵盤事件ctrl+V
    onkeydown(e) {
      let seft = this;
      if (e.which == "17") {
        seft.keyCodeCtrl = 1;
      }
      if (e.which == "86") {
        seft.keyCodeV = 1;
      }
      if (seft.keyCodeCtrl == 1 && seft.keyCodeV == 1) {
        this.clippedRange();
      }
    },
    //獲取粘貼值
    clippedRange() {
      let seft = this;
      document.addEventListener("paste", (event) => {
        let clipdata = https://www.cnblogs.com/mochenxiya/p/event.clipboardData || window.clipboardData;
        const html = event.clipboardData.getData("text/html");
        const $doc = new DOMParser().parseFromString(html, "text/html");
        // 加載所有的行
        const $trs = Array.from($doc.querySelectorAll("table tr"));
        let table = document.getElementById("table");
        $trs.forEach((item) => {
          table.append(item);
        });
        $trs.forEach((item, index) => {
          let item2 = item.getElementsByTagName("td");
          let list = [];
          for (let i = 0; i <= item2.length - 1; i++) {
            list.push(item2[i].innerHTML);
          }
          console.log("資料", list);
        });
      });
    },
  },
};
</script>

<style scoped>
</style>

效果圖：

在這里插入圖片描述

若對您有幫助，請點擊跳轉到Ｂ站一鍵三連哦！感謝支持！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504463.html

標籤：JavaScript

上一篇：常見的網頁復制粘貼禁用問題

下一篇：webgl(three.js)實作室內三維定位,3D定位,3D樓宇bim、實時定位三維可視化解決方案——第十四課（定位升級版）

【面試題】js實作將excel表格copy到頁面

js實作將excel表格copy到頁面