input type button 的value后台获取_点击复制功能和获取文件流导出

    1. 点击复制功能遇到一个需求，需要点击按钮，复制点击的文本到剪切板,然后Ctrl+v复制.

浏览器提供了 copy 命令 ，可以复制选中的内容

document.execCommand("copy")

如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用  copy 命令，将文本复制到剪切板

但是 select() 方法只对 和 有效，对于

最后我的解决方案是，在页面中添加一个 ，然后把它隐藏掉或者设置为透明属性

点击按钮的时候，先把

的 value 改为

的 innerText，然后复制 中的内容

01.  设置点击事件 获取到值

<div @click="copy(items)">div>

02. 透明处理input

    <input id="copy_content" type="text" style="opacity: 0;">

03. 复制的方法

    // 复制

    copy(val) {

      // 获取点击的值

      var clickContent = val

      // 获取要赋值的input的元素

      var inputElement = document.getElementById('copy_content')

      // 给input框赋值

      inputElement.value = clickContent

      // 选中input框的内容

      inputElement.select()

      // 执行浏览器复制命令

      document.execCommand('Copy')

      this.$message.success(clickContent + '已复制')

    },

  2. 获取文件流导出

    做一个导出文件的功能, 获取到的文件流是这样的

  

第一次获取这样的数据,无从下手啊,百度吧

首先在axios.post的请求中把默认的 " responseType:‘json’ " 改为" responseType:‘blob’

ios.post('路径', params, { responseType: 'blob' })

        .then((res) => {

          if (res.status === 200) {

            // 第一种- 自定义下载文件的名字

            const link = document.createElement('a')

            const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })

            const href = URL.createObjectURL(blob)

            link.href = href

            link.download = '自定义名字' + this.timestampToTime(new Date().getTime()) // 自定义文件名

            link.click() // 下载文件

            // 第二种-直接下载

            // const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })

            // const href = URL.createObjectURL(blob)

            // window.location.href = link.href

          }

        })