功能实现

1.复制功能的实现

复制功能在项目中是应用广泛的，get 这一功能！
这里使用了几种方法来实现复制功能

实现方法一

思路:

• 动态创建textarea控件
• 使用其select()方法
• 使用document.execCommand('Copy')
• 最后移除textarea控件

实现代码:

// html部分
<template>
  <div>
    <el-input v-model="inputText" placeholder="请输入"></el-input>
    <el-button plain @click="handleCopy">Copy</el-button>
  </div>
</template>
// js部分
methods: {
    handleCopy () {
      if(!this.inputText) {
        return this.$message('没有内容')
      }
      var textarea = document.createElement('textarea')
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      textarea.value = this.inputText
      document.body.appendChild(textarea)
      textarea.select()
      var result = document.execCommand('Copy')
      if(result) {
        this.$message('复制成功')
      }
      document.body.removeChild(textarea)
    }
}

效果图：

实现方法二(适用于可输入的表单控件)

实现代码：

// html部分
<template>
  <div>
    <el-input v-model="inputText" placeholder="请输入" ref="input"></el-input>
    <el-button plain @click="handleCopy">Copy</el-button>
  </div>
</template>
// js部分
 methods: {
    handleCopy () {
      if(!this.inputText) {
        return this.$message('没有内容')
      }
      this.$refs.input.select()
      var result = document.execCommand('Copy')
      if(result) {
        this.$message('复制成功')
      }
    }
  }

扩展(实现非输入框的复制)

实现代码：

// html部分
<span ref="span">ggg</span>
<el-button plain @click="handleCopy">Copy</el-button>
// js部分
 handleCopy () {
  const range = document.createRange()
  range.selectNode(this.$refs.span) // 选择节点
  const selection = window.getSelection()  // 获取页面选中信息
  selection.addRange(range) 
  document.execCommand('copy')
}

待续一键复制指令。。。

2.上传功能的实现

实现思路:

• 利用input表单file类型的上传功能
• 利用formData()对象添加文件

实现代码：

// html部分
<el-button @click="$refs['file'].click()">导入</el-button>
<input type="file" id="importgroups_input_box2" ref="file" @change="handleChange" />
// js部分
handleChange (e) {
  var file = e.target.files
  var formData = new FormData()
  formData.append('file', file[0])
}

效果图

3.下载功能的实现

实现思路:

• 利用a链接的download属性实现下载功能
• 当点击下载的时候动态a链接
• 给a链接绑定href属性确认下载的内容
• download属性确定下载内容的名称

代码实现：

// html部分
<el-button @click="handleDownload">下载</el-button>
// js部分
handleDownload () {
  this.downLoad(document.body.innerHTML, 'test.html')
},
downLoad (content, filename) {
  // 创建隐藏的可下载链接
  var eleLink = document.createElement('a')
  eleLink.download = filename
  eleLink.style.display = 'none'
  // 字符内容转变成blob地址
  var blob = new Blob([content])
  eleLink.href = URL.createObjectURL(blob)
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink)
},

效果图：

4.下载功能之-纯前端实现方式

需求：实现导出excel指定列 | 行的数据
效果图：

实现步骤：

• 1.安装插件

npm install xlsx file-saver element-ui --save

• 2.在项目中放入js文件

  

• 3.在组件中使用

<template>
  <el-button type="primary" @click="handleDownload">导出 Excel</el-button>
</template>
<script>
data () {
  return {
    multipleSelection: [],
    autoWidth: true,
    bookType: "xlsx"
  }
},
methods: {
  handleDownload() {
    import("./ExportExcel").then(excel => {
        const data = this.formatJson(["date"], this.multipleSelection);
        excel.export_json_to_excel({
          header: ["日期"],
          data,
          filename: "temp",
          autoWidth: this.autoWidth,
          bookType: this.bookType
        });
      });
  formatJson(filterVal, jsonData) {
    return jsonData.map(v =>
        filterVal.map(j => {
        return v[j];
        })
      );
    }
  }
}
</script>

• 4.补充说明：