背景

后臺(tái)開發(fā)過程中，涉及到表格類的需求上，往往出現(xiàn)復(fù)制表格數(shù)據(jù)到 excel 上的需求，以供使用人員繼續(xù)表格數(shù)據(jù)的處理。此方案旨在說明這類需求可能會(huì)遇到的難點(diǎn)以及如何處理。

原理-為什么剪切板中的文本可以按行按列地被顯示處理

excel 或者是 numbers 可以實(shí)現(xiàn)數(shù)據(jù)復(fù)制，實(shí)際上是對(duì) csv 的兼容帶來的？這個(gè)還沒有得到驗(yàn)證。

基本表達(dá)方式-格式化的規(guī)則

1. 單元格。使用 \t 制表符來表示
2. 換行。使用 \n 或者是 \r 來表示

流程

1. 格式化數(shù)據(jù)，利用制表符或者換行符
2. 將格式化之后的數(shù)據(jù)放到剪切板中

剪切板功能

1. 新建一個(gè)元素，并將數(shù)據(jù)放置到該元素中
2. 監(jiān)聽該元素的 copy 事件，其回調(diào)當(dāng)中有 clipboardData 對(duì)象。
3. 利用該對(duì)象的 setData，將數(shù)據(jù)放置到剪切板當(dāng)中。
4. 執(zhí)行 document.execCommand('copy') 觸發(fā) copy 事件

方案設(shè)計(jì)的重點(diǎn)

1. 格式的兼容性。microsoft excel 與 mac numbers 對(duì)于格式的處理不一致。
2. 如何使用剪切板功能?？梢允褂?
   1. copy-to-clipboard，實(shí)現(xiàn)了將指定文檔放入剪切板的能力。
   2. react-copy-to-clipboard， 基于 copy-to-clipboard 實(shí)現(xiàn)了 react 的封裝，可以使用聲明式的組件完成復(fù)制功能的描述。

兼容性問題

1. 需要將 format 設(shè)置為 ’text/plain‘，這是為了不繼承 html 的樣式，會(huì)更加容易處理樣式問題
2. 需要注意盡量不要使用 空格，因?yàn)樵?numbers 中，空格被認(rèn)為是制表符。還沒有找到方法處理 numbers 中對(duì)空格的處理。