title: MS Excel is pasting tab-delimited strings from React-Copy-To-Clipboard into just one cell
body: <p>I'm trying to use <a href="https://www.npmjs.com/package/react-copy-to-clipboard" rel="nofollow noreferrer">React-Copy-To-Clipboard</a> to create a copy-to-clipboard feature for my app, which will copy some data rows from a table, to the clipboard, in a tab-delimited format that Excel will paste correctly. </p>
  
  <p>i.e. joining each row item with '\t', and a '\n' at the end of each row.</p>
  
  <p>(Apologies to anyone offended by my use of coffeeScript)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>convertToTabSeparated : (rows) -&gt;
      dataRows =
      rows
        .map (row) -&gt; row.join('\t')
        .join('\n')
      return dataRows</code></pre>
  </div>
  </div>
  </p>
  
  <p>The output from this pastes in looking absolutely as it should:
  - on the console
  - in a text editor
  - and even when using 'paste special > paste values' in Excel Desktop (or a similar special paste in Google Spreadsheet).</p>
  
  <p>The <strong>problem</strong> is that a simple, non-special paste into Excel results in all the values being pasted into one cell.</p>
  
  <p>Muddying the waters more, when I use the Cloud version of MS Excel, this isn't the case - it works absolutely fine with a regular paste.</p>
  
  <p>Another thing: when I paste into a text editor, then copy again and re-paste the result into Excel, it works fine in all cases.</p>
  
  <p>So: does anyone know of any character/formatting issues that might come out of the react copy to clipboard component that results in the \t and \n not being registered properly when doing a regular paste?</p>
  
  <hr>
  
  <p><strong>Solution found, sort of:</strong>
  It seems the React library in question copies to clipboard the data with a surrounding html  element, which Excel's not keen on.
  I decided to add my own copy to clipboard DOM method, as follows, using the same approach but with a textarea instead of a span, and with a slightly different selection method. Seems to work great.</p>
  
  <pre><code>copyToClipboard : (text) -&gt;
      textArea = document.createElement("textarea")
      textArea.style.position = 'fixed'
      textArea.style.top = 0
      textArea.style.left = 0
      textArea.style.width = '2em'
      textArea.style.height = '2em'
      textArea.style.padding = 0
      textArea.style.border = 'none'
      textArea.style.outline = 'none'
      textArea.style.boxShadow = 'none'
      textArea.style.background = 'transparent'
      textArea.value = text
      document.body.appendChild(textArea)
      textArea.select()
  
      try
        successful = document.execCommand 'copy'
        msg = successful ? 'successful' : 'unsuccessful'
        log 'Copying text command was ' + msg
      catch err
        alert 'Unable to copy'
  
      document.body.removeChild textArea
  </code></pre>